2012-11-01 2 views
4

처음으로 Knockback.js으로 작업하고 있습니다.Knockback.js : 백본에서 모델을 업데이트 할 때보기 업데이트를 어떻게 만들 수 있습니까?

개념의 넉백 (Knockback) 증명 작업을하고 있지만 모델 저장시보기 모델을 업데이트하는 데 어려움을 겪고 있습니다. 이 경우 서버는 id 필드가 설정된 새 Domain 개체를 반환합니다. 즉, 개체가 이제 백 엔드에 있음을 의미합니다. 그런 일이 생기면 이제 UI가 저장된다는 사실을 반영하여 UI를 변경하고 싶습니다. 여기

내가 사용하고 코드입니다 :

문제는 model.save()에 의해 수행 XMLHttpRequest이 (가) kb.observable를 읽을 저장, 그래서 HTML 부분이 업데이트되지 않습니다 때까지 반환하지 않는 것 같다
<table cellspacing="0" class="listing-table" id="domainListTable"> 
    <thead> 
     <tr> 
      <th scope="col"> 
       Domain 
      </th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: domains"> 
     <tr> 
      <td> 
       <!-- ko if:save --> 
        <a data-bind="attr: { href: domainEditLinkdomainId, title: domain},text : domain"> 
         <span data-bind="text: domain"></span> 
        </a> 
       <!-- /ko --> 
       <!-- ko ifnot:save --> 
        <input type="text" maxlength="250" style="display:inline-block;" class="medium-text-field" data-bind="value: domain"></input> 
        <input data-bind="click: save" style="display:inline-block;" type="submit" value="Save New Domain" alt="" title=""/> 
       <!-- /ko --> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<br /> 
<input data-bind="click: addDomain" type="submit" value="Add New Domain" alt="" title=""/> 

<script type="text/javascript"> 
    var Domain = Backbone.Model.extend({ 
     defaults: function() { 
      return { 
      domain: "New Domain" 
      }; 
     }, 
    }); 

    var Domains = {}; 

    Domains.Collection = Backbone.Collection.extend({ 
     model: Domain, 
     url: '/cms/rest/poc/${customerId}/domains/' 
    }); 

    var domains = new Domains.Collection(); 
    domains.fetch(); 

    var DomainViewModel = kb.ViewModel.extend({ 
     constructor: function(model) { 
      kb.ViewModel.prototype.constructor.apply(this, arguments); 

      var self = this; 

      this.save = kb.observable(model, { 
       key: 'save', 
       read: (function() { 
       return !model.isNew(); 
       }), 
       write: (function(completed) { 
       return model.save({}, { 
        wait: true, 
        success: function (model, response) { 
         console.log(model); 
         console.log(response); 
         console.log(self); 
        }, 
        error: function(model, response) { 
         alert("Oh NooooOOOes you broked it!!!11!") 
        } 
       }); 
       }) 
      }, this); 

      this.domainEditLinkdomainId = ko.dependentObservable(function() { 
       if(!this.save()) 
        return ""; 

       return "cms?action=domainDetail&domainID=" + this.model().id; 
      }, this); 
     } 
    }); 

    var DomainsViewModel = function(collection) { 
     this.domains = kb.collectionObservable(collection, { view_model: DomainViewModel }); 
     this.addDomain = function() { 
      this.domains.push(new DomainViewModel(new Domain())); 
     }; 
    }; 

    var domainsViewModel = new DomainsViewModel(domains); 

    ko.applyBindings(domainsViewModel); 
</script> 

성공적으로, 그것은 여전히 ​​model.isNew()을 참으로 본다.

나는 모델이 업데이트되었음을 ​​알리기 위해 관찰 할 수있는 부분에 valueHasMutated 메서드를 사용하는 것을 포함하여 볼 수있는 여러 가지 아이디어로 어지럽게 해왔다. 그러나 어떻게해야 할지를 알 수 없다. 그것도.

도움이 될 것입니다.

+0

모델에 물건을 저장하는 경우 모델은 상태에 따라 다른 이벤트를 트리거해야합니다. 백본 문서에서 : 'Ajax 요청이 서버에 를 이동하기 시작, 즉시 "요청"이벤트는 "변경"이벤트가 발생합니다 새로운 속성을 저장 호출하고 서버 후 "동기화"이벤트 성공적인 변화를 인정했다. 모델에 새 속성을 설정하기 전에 서버를 기다리려면 {wait : true}를 전달하십시오. '보기에서 이벤트를 수신 할 수 없습니까? – mcclennon19

답변

0

change:id 이벤트를 모델에서들을 수 있습니다.

이것은 모델의 상태가 new에서 persisted로 변경되었을 때만 발생합니다.