数据如何绑定到 Kendo-Knockout 列表视图中的元素？答案

【问题标题】：How can a data-bind to an element within a Kendo-Knockout listview?数据如何绑定到 Kendo-Knockout 列表视图中的元素？
【发布时间】：2014-03-03 23:15:10
【问题描述】：

我有一个相当复杂的 Kendo ListView 模板，使用 knockout-kendo.js 绑定。它显示得很漂亮。我的问题是我需要在模板的某些部分使用可见和单击绑定，但我无法让它们工作。下面是我的模板的简化版本。基本上，deleteButtonVisible 确定是否可以看到关闭按钮，removeComp 从数组中移除该项。

<div class='template'>
   <div >
      <div style='display:inline-block' data-bind='visible: deleteButtonVisible, event: {click: $parent.removeComp}'>
        <img  src='../../../Img/dialog_close.png'></img>
   </div>
   <div class='embolden'>#= type#</div><div class='label1'> #= marketArea# </div>
   <div class='label2'> #= address# </div>
   <!-- more of the same -->
</div>

视图模型：

function CompViewModel() {
var self = this;
    self.compData = ko.observableArray().subscribeTo("compData");
    self.template = kendo.template(//template in here);
    self.removeComp = function (comp) {
        //do something here
    }

}

html:

   <div class="row" >
        <div class="col-md-12 centerouter" id="compDiv" >
            <div class="centerinner"  id="compListView" data-bind="kendoListView: {data: compData, template: template}"></div>

        </div>
    </div>

最后，样本数据：

   {
         type: "Comparable",
         marketArea: "",
         address: "2327 Bristol St",
         deleteButtonVisible: true
     },

【问题讨论】：

标签： javascript listview mvvm knockout.js kendo-ui

【解决方案1】：

考虑到 deleteButtonVisible 必须是链接到视图的 viewModel 上的一个属性。您现在没有这样做。 click 元素可以从绑定的外部范围访问并删除 $parent。他从 viewmodel 中获取方法。考虑一下，您在 vie 上所做的每一件事都必须呈现在视图模型上以便于访问。

【讨论】：