녹아웃이 값을 바인딩하지 않습니다.

Question

안녕하세요 다음 상황이 있습니다. 한 블록에 with 블록이 지정되었습니다. 이 속성이 null이면 내용이 존재하지 않습니다. 그러나 속성을 넣을 때 마크 업을 생성해야합니다.

HTML :

<!-- ko with: Gallery --> 
<div class="GalleryMain"> 
    <a href="#" data-bind="attr: {href: Current.Zoomed}" class="cloud-zoom" id="TargetZoom"> 
     <img data-bind="attr: {src: Current.Main}" alt="" /> 
    </a> 
    <span data-bind="text: Current.Zoomed"></span> 
    <span data-bind="text: Current.Main"></span> 
</div> 
​<!-- /ko --> 
<a href="javascript:;" id="Do">Update property</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

자바 스크립트 :

function PrimaryViewModel() { 
    var self = this; 
    this.Gallery = ko.observable(null); 
    this.Exit = function() { 
     self.Gallery(null); 
    } 
} 
var Picture = (function() { 
    function _Constructor(input) { 
     this.Zoomed = ko.observable(input.Zoomed); 
     this.Main = ko.observable(input.Main); 
     this.Thumb = ko.observable(input.Thumb); 
    } 
    _Constructor.Width = 489; 
    _Constructor.Height = 835; 
    return _Constructor; 
})(); 

function GalleryViewModel(data, current) { 
    var self = this; 
    this.Pictures = ko.observableArray($.map(data, function(input) { 
     return new Picture(input); 
    })); 

    var all = this.Pictures(); 
    this.Current = ko.observable(all[0]); 
    for (var i = 0; i < all.length; i++) 
     if (all[i].Main == current) 
      this.Current(all[i]); 
    this.SetCurrent = function() { 
     self.Current(this); 
    } 
} 
$(function() { 
    var viewModel = new PrimaryViewModel(); 
    $("#Do").click(function() { 
     var data = [{ 
      "Zoomed": "Content/Big/1Z.jpg", 
      "Main": "Content/Big/1.jpg", 
      "Thumb": "Content/Images/Thumbs/1.jpg"}, 
     { 
      "Zoomed": "Content/Big/2Z.jpg", 
      "Main": "Content/Big/2.jpg", 
      "Thumb": "Content/Images/Thumbs/2.jpg"}, 
     { 
      "Zoomed": "Content/Big/3Z.jpg", 
      "Main": "Content/Big/3.jpg", 
      "Thumb": "Content/Images/Thumbs/B1.jpg"}, 
     { 
      "Zoomed": "Content/Big/4Z.jpg", 
      "Main": "Content/Big/4.jpg", 
      "Thumb": "Content/Images/Thumbs/3.jpg"}, 
     { 
      "Zoomed": "Content/Big/15.jpg", 
      "Main": "Content/Big/5.jpg", 
      "Thumb": "Content/Images/Thumbs/B2.jpg"}]; 
     viewModel.Gallery(new GalleryViewModel(data, "Content/Big/1.jpg")); 
    }); 
    ko.applyBindings(viewModel); 
});​ 

Fiddle

html로 생성되는 Update property 버튼을 누른 후하지만 바인딩이 발생하지 않습니다. 도와주세요.

Answer 1

나는 한 번 해봤는데 괜찮아 보인다. 필자는 그림의 수와 입력란으로 '확대/축소'된 이름을 나열하기 위해 귀하의 바이올린을 업데이 트하고 그냥 정상적인 목록과 모든 작품 괜찮아. 확대/축소 된 이름을 편집하면 축소 된 이름 목록이 자동으로 업데이트됩니다.

http://jsfiddle.net/unklefolk/kKc6R/5/

희망은 내가 모르는 뭔가가 아니에요!

Answer 2

내 문제를 해결했습니다. 캐치는 정말로 숨겨져 있었고, "JavaScripting"할 때 항상 일어났습니다.

<span data-bind="text: Current.Zoomed"></span> 
<span data-bind="text: Current.Main"></span> 

이 관찰 Current의 Zoomed 속성을 포착하려고했다.

<span data-bind="text: Current().Zoomed"></span> 
<span data-bind="text: Current().Main"></span> 

추가 괄호 Zoomed 속성이 포함 된 대상 객체를 추출합니다.