Dynamically bind data with button in Knockout.js?

Question

I'm using MVC3 with Knockout.js and want to attach some data from the api to my button with data-bind=addContribute in a template. This button should open a pop up box and I need the attached button data on that pop up. How can I do this?

My template:

<div>
        <ul data-bind="template: {name: 'membersTemplate', foreach: viewModel.membersList}">
        </ul>
</div>

<script id="membersTemplate" type="text/html">
    <li>
        <div class="fl width165">
            <img src=" ${ image } " width="33" height="34" />
            <span> ${ memberName } </span>
            ${ memberType }
        </div>
        <aside class="fr margint10">
            <label> ${ contributions } </label>
            <a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: viewModel.addContribute" ></a>
        </aside>
    </li>
</script>

Can you post this in a fiddle, you don't have any code to look at. Also, what template language are you using, this isn't a Knockout template. — Kyeotic
– Kyeotic, Commented Nov 1, 2012 at 16:37

Ilya · Accepted Answer · 2012-11-01 20:24:42Z

<script id="membersTemplate" type="text/html">
    <li>
        <div class="fl width165">
            <img data-bind="attr : {src : img}" width="33" height="34" />
            <span data-bind="text : memberName"></span>
            <span data-bind="text : memberType"></span>
        </div>
        <aside class="fr margint10">
            <label data-bind="text : contributions"></label>
            <a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: addContribute" ></a>
        </aside>
    </li>
</script>

membersList varibale in you code should be next

function SingleMember(img, name, type, contr)
{
   var self = this
   self.img = ko.observable(img)
   self.memberName = ko.observable(name)
   self.memberType = ko.observable(type)
   self.contributions = ko.observable(contr)  
   self.addContribute = function() {  
       //  
    }
 }

window.viewModel = new function()  
{  
   var self = this  
   self.membersList = ko.observableArray()  
   self.membersList.push(new SingleMember(/*.... params1*/))  
   self.membersList.push(new SingleMember(/*.... params2*/))
}

Collectives™ on Stack Overflow

Dynamically bind data with button in Knockout.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related