2012-02-24 108 views
2

嗨,我有以下情况。我有一个with块分配给一个属性。当此属性为空时,内容不存在。但是,当一个放置属性标记应该生成。敲除没有绑定值

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

压制正在生成的HTML Update property按钮后但不会发生绑定。请帮帮我。

回答

0

我已经看过,看起来没问题。我已经更新了你的小提琴,列出了图片的数量和他们的'缩放'名称作为输入框,只是一个正常的列表和所有作品没关系。如果您编辑缩放名称,缩放名称列表会自动更新。

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

希望我没有失去了一些东西!

+0

这里的主要问题是我无法访问'Current'属性。在你的演示中没有'img'标签的渲染。 – Oybek 2012-02-24 12:20:04

+0

无论如何谢谢你的努力。 )) – Oybek 2012-02-24 12:26:05

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属性的目标对象。