javascript - knockout 不绑定(bind)值

Question

您好，我遇到了以下情况。我有一个 with block 分配给一个属性。当此属性为 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 但没有绑定(bind)发生。请帮助我。

Answer 1

我已经解决了我的问题。陷阱真的隐藏得很好，就像“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 属性的目标对象。