Question

I have been using Bootstrap for a while now and love it. Saves me a bunch of time. I just started with KnockoutJS and as it happens, I have to combine the two at a rather granular level. My Knockout object(s) are filling a results table. When I just want the values (like Name) it is working great. However, I want to put an icon (icon-pencil for you Bootstrap people) in front of my link so it stands out as something to edit. I am using ASP.Net (not MVC) but I suspect that is not an issue.

Here is some code that works (but has no icon):

<asp:LinkButton ID="lbtEditGenerator" runat="server" data-bind="text: GeneratorName, click: function() { EditGeneratorClick(GeneratorID) }"></asp:LinkButton>

However, I want to add the following code just in front of the “GeneratorName” to get me the pencil icon. I need it to be within the text property so it is part of the LinkButton:

<i class='icon-pencil'></i>

Combining them in the bind-data (as follows) throws a parsing error:

<asp:LinkButton ID="lbtEditGenerator" runat="server" data-bind="text: <i class='icon-pencil'></i> GeneratorName, click: function() { EditGeneratorClick(GeneratorID) }"></asp:LinkButton>

Aside from creating a new property on my object that combines the two values, is there a way to do this with the Knockout binding?

Answer 1

Have you tried something along these lines:

<asp:LinkButton ID="lbtEditGenerator" runat="server" click: function() { EditGeneratorClick(GeneratorID) }">
    <i class='icon-pencil'></i>
    <span data-bind="text: GeneratorName"></span>
</asp:LinkButton>

Alternatively, you can put the <i> element before the <asp:LinkButton>. The solution above allows you to click either on the icon or on the text to trigger the button.