如何将数据绑定到Kendo-Knockout列表视图中的元素?

时间:2014-02-06 19:49:00

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

我使用knockout-kendo.js绑定为Kendo ListView提供了一个相当复杂的模板。它显示得很漂亮。我的问题是我需要在模板的某些部分使用可见和单击绑定,但我无法让它们工作。以下是我的模板的简化版本。基本上,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
     },

1 个答案:

答案 0 :(得分:0)

请记住,deleteButtonVisible必须是链接到视图的viewModel上的属性。您现在没有这样做。 click元素可以从绑定的外部范围访问并删除$ parent。他从viewmodel中获取方法。请记住,您在视图模型上的所有内容都必须出现在视图模型上,以便于访问。