2015-10-26 63 views
0

我想根據模型中的字段是否已更改來顯示或隱藏我的劍道模板的元素。綁定可見字段(在kendo observable中)是否已更改?

第一次嘗試:

<input type="text" data-bind="value: schedulerEventFieldOne"/> 
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne.dirty"/> 

嘗試二是有一個「schedulerEventFieldOneOrigValue」字段添加到我的模式,那麼這樣做:

<input type="text" data-bind="value: schedulerEventFieldOne"/> 
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne != schedulerEventFieldOneOrigValue"/> 

但是這給了我一個錯誤,指出schedulerEventFieldOne是沒有定義的。它似乎不喜歡平等測試。這很奇怪,因爲使用<或r>測試似乎工作正常:「visible:schedulerEventFieldOne> 0」

有沒有辦法使用kendo綁定完成我的任務?或者我將不得不再次訴諸於jQuery?

回答

0

你沒有說明任何問題,那你爲什麼不用視圖模型做第二種方法呢?這是可能做到這一點,我相信:

$(document).ready(function() { 
 
    var vm = kendo.observable({ 
 
    form: { 
 
     country: "" 
 
    }, 
 
    original: { 
 
     country: "" 
 
    }, 
 
    isDisabled: function() { 
 
     return this.get("form.country") != this.get("original.country"); 
 
    }, 
 
    save: function() { 
 

 
    } 
 
    }) 
 

 
    kendo.bind($("#test"), vm); 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="test"> 
 
    <input type="text" data-bind="value: form.country" /> 
 
    <button data-bind="click:save, visible:isDisabled">Save</button> 
 
    </div> 
 
</body> 
 

 
</html>

相關問題