1

ネストされた配列を持つ配列の構造があります。ネストされた配列から項目を削除しようとしていますが、「削除は関数ではありません」というエラーが表示されます。

私は単純な jsFiddle - http://jsfiddle.net/rswailes/gts5g/で問題を再現し、以下のコードも貼り付けました。

オブザーバブルを設定した方法が正しくない可能性がありますが、困惑しています。

これは私のhtmlです：

<script id="bookGroupTemplate" type="text/html">
    <br/>
    <h3><span data-bind="text: group_name"></span></h3>
    <table>
        <thead>
            <tr>
                <th>Author</th>
                <th>Title</th>
                <th>Genre</th>
                <th></th>
            </tr>        
        </thead>
        <tbody data-bind='template: {name: "bookRowTemplate", foreach: books}'></tbody>        
    </table>
</script>

<script id="bookRowTemplate" type="text/html">
    <tr>
        <td data-bind="text: author"></td>
        <td data-bind="text: title"></td>
        <td data-bind="text: genre"></td>        
    </tr>
</script>


<h1>Books!</h1>

<div data-bind='template: {name: "bookGroupTemplate", foreach: bookGroups}'></div>

<br/><br/>
<button data-bind="click: function(){viewModel.handleButtonClick(); }">Move One From Now to Later</button>

これはJavaScriptです：

var BookGroup = function(group_name, booksToAdd){
    var self = this;

    this.group_name = ko.observable(group_name);
    this.books = ko.observableArray();

    _.each(booksToAdd, function(book){
        self.books.push(ko.observable(book));            
    });        
}   

var Book = function(author, title, genre) {
    this.author = ko.observable(author);
    this.title = ko.observable(title);
    this.genre = ko.observable(genre);
}

var PageViewModel = function() {
    var self = this;
    this.bookGroups = ko.observableArray();

    this.bookToUse = new Book("Robin Hobb", "Golden Fool", "Fantasy");

    this.indexAction = function() {
        var groups = [];

        var booksArray = [];

        booksArray.push(this.bookToUse);
        booksArray.push(new Book("Patrick  R Something", "Name Of The Wind", "Fantasy"));
        booksArray.push(new Book("Someone Else", "Game Of Thrones", "Fantasy"));

        groups.push(new BookGroup("To Read Now", booksArray));

        booksArray = [];

        booksArray.push(new Book("Terry Pratchett", "Color of Magic", "Discworld"));
        booksArray.push(new Book("Terry Pratchett", "Mort", "Discworld"));
        booksArray.push(new Book("Terry Pratchett", "Small Gods", "Discworld"));

        groups.push(new BookGroup("To Read Later", booksArray));
        this.bookGroups(groups);

    };

    this.handleButtonClick = function(){
        console.log(this.bookGroups()[0].books().length);
        this.bookGroups()[0].books().remove(this.bookToUse);
    };
};

viewModel = new PageViewModel();
ko.applyBindings(viewModel);
viewModel.indexAction();

ここで remove が認識されないのはなぜですか? これはモデルを構築する正しい方法ですか?

アドバイスをありがとう:)

4

2 に答える 2

1

removeそのコンテンツではなく、observableArrayを試しましたか。つまり、次のようになります。

this.handleButtonClick = function(){ 
    console.log(this.bookGroups()[0].books().length); 
    this.bookGroups()[0].books.remove(this.bookToUse); 
};

観測可能な配列を参照してください

于 2012-10-10T08:44:30.927 に答える
1

2 つのエラーがありました:

  • 監視可能な配列ではなく、javascript 配列から remove 関数を呼び出そうとしました。
  • observableArray に配置するときに、book オブジェクトを observable でラップする必要はありません。
于 2012-10-10T08:50:21.327 に答える