1

collection.getとmodel.getが未定義を返す問題があります。

これが私の初期化コードです

initialize: function () {
    this.collection = new productsCollection();
    this.model = new productModel();
}

これが私のレンダリングコードです

this.collection.fetch({
    success: function (product) {
        console.log(product);
        $(that.el).html(_.template(productListTemplate, { products: product.models, _: _ }));
    }
});

私の製品リストは正常に表示されています。各製品をクリックすると、名前を変更できるポップアップが表示されます

モデルに設定された新しい名前を取得し、保存をトリガーしたい

しかし、私はここで製品のモデルを取得することができませんコードです

$("#productName").val($(e.currentTarget).html());

var ID = $(e.currentTarget).data("id");
var item = this.collection.get(ID);

console.log("start..........");
console.log(item);
console.log(ID)
//            console.log(this.collection);
console.log(this.model.get(item));
console.log("end..........");

$('.modal').modal('toggle');

コンソールで正しいIDを取得できますが、コレクションとモデルは取得できません

誰かが事前に感謝を助けることができます

ここでの更新 は完全なビューコードです

function ($, _, Backbone, popupModal, productTab, productsCollection, productListTemplate, productModel) {
    var productListView = Backbone.View.extend({
        el: $("#page"),
        initialize: function () {
            this.collection = new productsCollection();
            this.model = new productModel();
            this.model.bind('change', this.loadResults, this);
        },
        render: function () {
            this.loadResults();
        },
        loadResults: function () {
            var that = this;
            this.collection.fetch({
                success: function (product) {
                    console.log(product);
                    $(that.el).html(_.template(productListTemplate, { products: product.models, _: _ }));
                }
            });
            var modalWindow = $(".modal").modal({
                show: false,
                backdrop: true,
                closeOnEscape: true
            });
            $('#createProduct').click(function (e) {
                this.modalWindow.modal('show');
            });
        },
        // This will simply listen for scroll events on the current el
        events: {
            "click #saveProduct": "saveProduct",
            "click .productTabs": "productTabs",
            "click .productDetails": "productDetails"
        },
        saveProduct: function () {
            this.model.set({
                Name: $('#productName').val()
            });
            this.model.save({ id: this.model.get('id') },
         {
             success: function (model, response) {
                 //                 console.log("success");
             },
             error: function (model, response) {
                 //                 console.log(response);
                 var errorMsg = JSON.parse(response.responseText);
                 $(".errorMessage").html('<div class="alert alert-error">' + errorMsg.Error + '</div>');
             }
         });
        },
        productTabs: function (e) {
            e.preventDefault();
            $(this).tab('show');
        },
        productDetails: function (e) {
            e.preventDefault();
            $("#productName").val($(e.currentTarget).html());
            var ID = $(e.currentTarget).data("id");
            var item = this.collection.get(ID);
            console.log("start..........");
            console.log(item);
            console.log(ID)
            //            console.log(this.collection);
            console.log(this.collection.models.get(item));
            console.log("end..........");
            $('.modal').modal('toggle');
        }
    });
    return new productListView;
});

UPDATE応答

this.collection

b.hasOwnProperty.e
_byCid: Object
_byId: Object
_onModelEvent: function () { [native code] }
_removeReference: function () { [native code] }
length: 2
models: Array[2]
0: b.hasOwnProperty.e
1: b.hasOwnProperty.e
length: 2
__proto__: Array[0]
__proto__: s​

2つのモデルがあり、私のリストにも2つの製品があります

このモデル

_callbacks: Object
_changed: false
_changing: false
_escapedAttributes: Object
_previousAttributes: Object
attributes: Object
ID: ""
Name: ""
hRef: ""
__proto__: Object
cid: "c2"
__proto__: s

属性は空です

これは私に次のことを与えます

cid: "view1"
collection: b.hasOwnProperty.e
_byCid: Object
_byId: Object
_onModelEvent: function () { [native code] }
_removeReference: function () { [native code] }
length: 2
models: Array[2]
__proto__: s
model: b.hasOwnProperty.e
_callbacks: Object
_changed: false
_changing: false
_escapedAttributes: Object
_previousAttributes: Object
attributes: Object
cid: "c2"
__proto__: s
options: Object
__proto__: s

更新これは、コレクションを展開したときに表示されるものです

b.hasOwnProperty.e
_byCid: Object
_byId: Object
_onModelEvent: function () { [native code] }
_removeReference: function () { [native code] }
length: 2
models: Array[2]
0: b.hasOwnProperty.e
_callbacks: Object
_changed: false
_changing: false
_escapedAttributes: Object
_previousAttributes: Object
attributes: Object
ID: "7e0c94fc-7c16-45c9-84a9-a0690103b946"
Name: "dsa"
hRef: "Product/dsa"
__proto__: Object
cid: "c3"
collection: b.hasOwnProperty.e
__proto__: s
1: b.hasOwnProperty.e
length: 2
__proto__: Array[0]
__proto__: s
4

2 に答える 2

2

問題は、DOM イベントによって呼び出されるすべての関数をビューのインスタンスにバインドする必要があることです。

したがって、次の行をinitializeメソッドに追加します。

_.bindAll(this, "saveProduct", "productTabs", "productDetails")

それ以外の場合this、関数はwindowビューのインスタンスではなくグローバル オブジェクトになります。

于 2012-09-14T20:00:58.590 に答える
0

もしも

Collection.findWhere({_id: ID}) // get the right answer

次のように結論付けることができます。

例えば ​​：

var Model = Backbone.Model.extend();
var Col = Backbone.Collection.extend({ model: Model });

var Persons = new Col([{
    _id: 1,
    name: 'Ken'
}, {
    _id: 2,
    name: 'Mike'
}, {
    _id: 3,
    name: 'John'
}]);

console.log( Persons.get(1) ); // undefined

M のidAttributeを示す場合:

var M = Backbone.Model.extend({ idAttribute: '_id' });
...
console.log( Persons.get(1) ); // the model of Ken

次のように、Model が必要ない場合もあります。

var Col = Backbone.Collection.extend();

var Persons = new Col([{
    _id: 1,
    name: 'Ken'
}, {
    _id: 2,
    name: 'Mike'
}, {
    _id: 3,
    name: 'John'
}]);

console.log( Persons.get(2) ); // undefined

これを解決するには、元のmodelIdメソッドを書き直すだけです。

var Col = Backbone.Collection.extend({
    modelId: function() {
        return '_id';
    }
});
...
console.log( Persons.get(2) ); // the model of Mike

PS: 詳細は公式ドキュメントを参照してください。

追伸: BackboneJS の古いバージョンはmodelIdをサポートしていません

于 2015-10-30T07:26:39.880 に答える