CODEWITHSUNDEEP
javascriptjquerydata-bindingknockout.js
Oybek
Oybek

Reputation: 7243

Knockout is not binding the values

Hi I have the following situation. I have one with block assigned to a property. When this property is null the content doesn't exist. However when one puts the property markup should be generated.

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

After pressing Update property button the html is being generated but no bindings occur. Please help me.

Upvotes: 2

Views: 4189

Answers (2)

Oybek
Oybek

Reputation: 7243

I've solved my problem. The catch was really well hidden, as allways happen when "JavaScripting".

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

It was trying to capture Zoomed property of Current observable.

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

Adding parentheses extracts the target object that contains the Zoomed property.

Upvotes: 1

Mark Robinson
Mark Robinson

Reputation: 13278

I've had a look and it seems okay. I have updated your fiddle to list out the number of pictures and their 'zoomed' name as input boxes and just a normal list and all works okay. If you edit a zoomed name the list of zoomed names is updated automatically.

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

Hope I'm not missing something!

Upvotes: 0

Related Questions