淘汰赛不绑定值

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

我已经解决了我的问题。问题隐藏得非常好，就像“JavaScripting”时总是发生的那样。

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

它试图捕获 Current observable 的 Zoomed 属性。

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

添加括号会提取包含Zoomed 属性的目标对象。

Answer 2

我看过了，好像没问题。我已经更新了你的小提琴，列出了图片的数量和它们的“缩放”名称作为输入框，只是一个普通的列表，一切正常。如果您编辑缩放名称，则缩放名称列表会自动更新。

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

希望我没有遗漏什么！