0

ページにジョブのリストを表示する foreach テンプレートがあります。各ジョブ内には、ジョブ ノートのリストがあります。ビューでジョブメモを更新できるようにするための適切なオブザーバブルを設定するのに問題があります。

jsFiddle へのリンクは次のとおりです: http://jsfiddle.net/b3B8p/

または、コードはそのままです。サブリストの監視可能な配列を Job オブジェクト自体に配置するか、ビューに配置するかはわかりません...

<div data-bind="foreach: jobs">
    <div>
        <div class="jobContainer">
            <label data-bind="text: JobTitle"></label> 
            <label data-bind="text: CompanyName"></label>
            <div class="jobDetails" data-bind="visible: expanded">
                <label data-bind="text: City"></label>
                <label data-bind="text: State"></label>
                <div data-bind="foreach: Notes">
                    <label data-bind="text: Text"></label>               
                </div> 
            </div>                           
        <div>
        <a href="#" data-bind="click: $parent.toggle, text: linkLabel">Expand</a> 
        <a href="#" data-bind="click: $parent.addNote">Add Note</a>  
    </div>    
</div>    


function JobNote() {
    this.Text = "some text!";       
}

function Job() {
    this.JobTitle = ko.observable("some job");
    this.CompanyName = ko.observable("some company");
    this.City = ko.observable("some city");
    this.State = ko.observable("some state");
    this.Notes = ko.observableArray([
       new JobNote(),
       new JobNote(),       
    ]);

    this.someValue = ko.observable().extend({ defaultIfNull: "some default" });

    this.expanded = ko.observable(false);

    this.linkLabel = ko.computed(function () {
        return this.expanded() ? "collapse" : "expand";
    }, this);      
};

var viewModel = function () {
    this.jobs= ko.observableArray([
        new Job(),
        new Job(),
        new Job(),
        new Job(),
        new Job(),
        new Job(),
        new Job(),
        new Job(),
        new Job(),        
        new Job(),
    ]);

    this.toggle = function (item) {
        item.expanded(!item.expanded());
    }

    this.addNote = function(job) {
         // what should go in here?
    }    
};

ko.applyBindings(new viewModel());​
4

1 に答える 1

1

Niko がこのシナリオで言ったように、メソッドをクラスに追加します。そのようです。

function Job() {
    var self = this;

    this.JobTitle = ko.observable("some job");
    this.CompanyName = ko.observable("some company");
    this.City = ko.observable("some city");
    this.State = ko.observable("some state");

    this.Notes = ko.observableArray([
       new JobNote(),
       new JobNote(),       
    ]);

    this.someValue = ko.observable().extend({ defaultIfNull: "some default" });

    this.expanded = ko.observable(false);

    this.linkLabel = ko.computed(function () {
        return this.expanded() ? "collapse" : "expand";
    }, this);   

    this.toggle = function () {
        self.expanded(!self.expanded());
    };

    this.addNote = function () {
        self.Notes.push(new JobNote());
    }    
};

これにより、すべてがうまくカプセル化されます。

お役に立てれば。

于 2012-05-15T15:41:31.177 に答える