Backbone.View not responding to Backbone.UI

我正在构建一个小程序，以允许显示一群人的一些细节。有一个选项可以更新详细信息。但是，视图不会呈现更新：

这是我的服务器.js：

var express= require("express"),
bodyparser= require("body-parser");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.get("/", function(req, res){
    res.render("index.jade");
});
app.listen(3002);

我的索引是：

doctype html
link(rel="stylesheet", href="backbui.css")
#main
script(src= "jquery.js")
script(src= "underscore.js")
script(src= "backbone.js")
script(src= "laconic.js")
script(src= "moment.js")
script(src= "backbui.js")
script(src= "theapp.js")

我的应用程序.js文件是：

var Person= Backbone.Model.extend({}),
People= Backbone.Collection.extend({});
var Genders= new Backbone.Collection(
        [
             {name: "Female", id: 1},
             {name: "Male", id: 0}
]);
var people= new People([
            {name: "John Doe", gender: Genders.get(0), birthday:
             new Date(1990, 5, 15), married: false},
            {name: "Jane Smith", gender: Genders.get(1), birthday:
             new Date(1985, 10, 10), married: true},
            {name: "Tom Smith", gender: Genders.get(0), birthday: 
             new Date(1980, 1, 20), married: true},
            {name: "Sally Fox", gender: Genders.get(1), birthday: 
             new Date(1998, 7, 31), married: false}
]);
var table= new Backbone.UI.TableView({
    model: people,  // collection can also be passed
    columns: [
        {title: "Name", content: "name"},
        {title: "Gender", content: "gender", 
         format: function(model){ return model.get("name"); }},
        {title: "Birthday", content: "birthday",
         format: function(date){ return date.toString(); }},
        {title: "Married", content: "married",
         format: function(married){ return married? "yes": "no"; }}
    ]
}); 
var sally= people.models[3];
var textbox= new Backbone.UI.TextField({
    model: sally,
    content: "name",
});
var radios= new Backbone.UI.RadioGroup({
    model: sally,
    content: "gender",
    alternatives: Genders,
    altLabelContent: "name",
});
var Appview= Backbone.View.extend({
    el: "#main",
    render: function(){
            this.$el.append(table.render().el);
            this.$el.append(textbox.render().el);
            this.$el.append(radios.render().el);
            return this;
    }
});
new Appview().render();

当我在文本框区域中进行更改时，我想在表中查看第 4 个名称的实时更新，即莎莉·福克斯。同样，我希望看到莎莉·福克斯的表性别在我更改单选按钮时发生变化。

基本上，我希望我的Backbone.TableView能够监听其他Backbone.UI小部件（如Backbone.UI.RadioGroup和Backbone.UI.TextField）中所做的更改

。

你走在正确的道路上。在视图中添加侦听器，以便在people集合发生更改时侦听。对单个模型的更改（即 sally ）也将在收藏中冒泡。

我对Backbone.UI不太熟悉，但更改会像这样：

// Make the table listen to changes in the passed-in collection & re-render
// when needed
var table= new Backbone.UI.TableView({
    model: people,  // collection can also be passed
    columns: [
        {title: "Name", content: "name"},
        {title: "Gender", content: "gender", 
         format: function(model){ return model.get("name"); }},
        {title: "Birthday", content: "birthday",
         format: function(date){ return date.toString(); }},
        {title: "Married", content: "married",
         format: function(married){ return married? "yes": "no"; }}
    ],
    initialize: function() {
        // When a change event happens to the model/collection, re-render
        this.listenTo(model, 'change', this.render);
    }
});

对于要对数据更改做出反应的其他视图，您将执行类似的操作。关键是让视图共享要更改的模型/集合的同一实例，然后侦听特定更改。

如果这不能让你继续，发表评论和/或JSFiddle，我们可以通过这种方式取得进展。

虽然Peter（上图）给出的答案也是正确的，但我们也可以直接在backbone-ui.js库文件中进行更改：

在 tableview 的初始化方法中（在文件主干 -ui.js 中搜索 tableview，找到它的初始化函数）添加：

this.model.on("change", this.render, this);

你会没事的。（您可能希望在 backbone-ui.js 文件的 list 属性的初始化方法中添加相同的行，以获取列表的响应视图）

相关内容

最新更新

热门标签：