Knockout.js를 업그레이드했습니다. 이제 템플릿이 깨졌습니다.

내 프로젝트에서 knockout.js를 1.2에서 2.1로 업그레이드했습니다. 나는 몇 가지 기본 템플릿을 사용하고 있으며 그것들은 부서진 것처럼 보입니다. 나는 jQuery.tmpl.js와 knockout-2.1.0.js를 포함하고있다. 빠른 답변을 원합니다.Knockout.js를 업그레이드했습니다. 이제 템플릿이 깨졌습니다.

<ul data-bind="template: {name:'addressesTemplate', foreach:addresses}"></ul> 

<button data-bind="click: addAddress">Add Address</button> 

<button data-bind="click: save">Save Account</button> 

<script id="addressesTemplate" type="text/html"> 
    <li> 
    Address Type: <input data-bind="value: addressType"/><br/> 
    Address Line 1: <input data-bind="value: addressLine1"/><br/> 
    Address Line 2: <input data-bind="value: addressLine2"/><br/> 
    City: <input data-bind="value: city"/><br/> 
    State: <input data-bind="value: state"/><br/> 
    Country: <input data-bind="value: country"/><br/> 
    Zip Code: <input data-bind="value: zipCode"/><br/> 
    <button data-bind="click: remove">Remove</button> 
    </li> 
</script> 
<script type="text/javascript"> 



    function addressModel(id) { 
     return { 
      id: id, 
      addressType: ko.observable(), 
      addressLine1: ko.observable(), 
      addressLine2: ko.observable(), 
      city: ko.observableArray(), 
      state: ko.observableArray(), 
      country: ko.observableArray(), 
      zipCode: ko.observableArray(), 

      remove: function() { 
       viewModel.addresses.remove(this); 
      } 

     }; 
    } 

    var viewModel = { 
     id : 0, 
     username: ko.observable(""), 
     addresses: ko.observableArray([]), 
     addAddress: function() { 
      this.addresses.push(new addressModel("")); 
     }, 


     save: function() { 
      alert(ko.toJSON(this)); 
      $.ajax({ 
       url: "/account/Save", 
       type: "post", 
       data: ko.toJSON(this), 
       contentType: "application/json", 
       success: function(result) {alert(result.message) }, 
       failure: function(result) { alert('fail') } 
      }); 
     } 

    }; 


    ko.applyBindings(viewModel); 

</script>

출처

2012-07-17 kirkmcpherson

작품 미세 : HTTP ://jsfiddle.net/tyrsius/R3eDR/. 참고로, 부모 함수를 가리키는 remove 함수를 가진 addressModel은 나쁜 것입니다. remove 함수는 viewmodel에 있어야합니다. 이유 또는 방법에 대한 자세한 설명이 필요하면 알려주십시오. – Tyrsius

jQuery.tmpl.js를 꺼내보십시오. 더 이상 사용되지 않습니다. – Tyrsius

jQuery 템플릿의 기능을 사용하지 않는다면 (예제는 그렇지 않습니다), @Tyrsius가 언급 한대로 제거 할 수 있습니다. 문제는 귀하의 jQuery 템플릿 버전이 너무 오래되었을 가능성이 높습니다. 콘솔에이를 나타내는 메시지가 표시되어야합니다. 다음은 작동하는 버전에 대한 링크입니다 : http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js. 종속성을 제거하는 것이 최선의 선택입니다. –

jquery.tmpl을 제거한 것이므로 대답으로 추가하고 있습니다. 그러나 부가가치를 들어, 여기에 제거 기능을 가진 당신의 ViewModel 바인딩

function addressModel(id) { 
    return { 
     id: id, 
     addressType: ko.observable(), 
     addressLine1: ko.observable(), 
     addressLine2: ko.observable(), 
     city: ko.observableArray(), 
     state: ko.observableArray(), 
     country: ko.observableArray(), 
     zipCode: ko.observableArray() 
    }; 
} 

var ViewModel = function() { 
    var self = this; 
    this.id = 0; 
    self.username= ko.observable(""); 
    self.addresses= ko.observableArray([]); 
    self.addAddress= function() { 
     self.addresses.push(new addressModel("")); 
    }; 
    self.removeAddress = function(address) { 
     self.addresses.remove(address); 
    }; 
};

새로운 button 뷰 모델에 (그리고 a fiddle에서) 최대 이동 :

<button data-bind="click: $parent.removeAddress">Remove</button>

나를 위해

출처

2012-07-17 18:46:49 Tyrsius

Knockout.js를 업그레이드했습니다. 이제 템플릿이 깨졌습니다.

답변

관련 문제