Нокаут не привязывает значения

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JavaScript:

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

После нажатия кнопки Update property HTML который генерируется, но не происходят привязок. Пожалуйста, помогите мне.

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> 

Он пытается захватить Zoomed свойства Current наблюдаемого.

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

Добавление круглых скобок извлекает целевой объект, который содержит Zoomed свойство.