用 Knockout.js 中的按钮动态绑定数据？答案

【问题标题】：Dynamically bind data with button in Knockout.js?用 Knockout.js 中的按钮动态绑定数据？
【发布时间】：2012-11-02 04:24:42
【问题描述】：

我将 MVC3 与 Knockout.js 一起使用，并希望在模板中使用 data-bind=addContribute 将一些数据从 api 附加到我的按钮。此按钮应打开一个弹出框，我需要该弹出框上的附加按钮数据。我该怎么做？

我的模板：

<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>

【问题讨论】：

你能把这个贴在小提琴里吗，你没有任何代码可以看。另外，您使用的是什么模板语言，这不是 Knockout 模板。

标签： asp.net-mvc-3 html knockout.js

【解决方案1】：

<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 代码中的变量应该是下一个

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*/))
}

【讨论】：