[英]Backbone.View not responding to Backbone.UI
我正在構建一個小程序,以允許顯示一群人的一些細節。 有一個選項可以更新詳細信息。 但是,視圖不會呈現更新:
這是我的server.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);
我的index.jade是:
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")
我的theapp.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();
我想在表viz中看到第4個名稱的實時更新。 當我在文本框區域中進行更改時,Sally Fox就會出現。 同樣,當我在單選按鈕中進行更改時,我希望看到Sally Fox的表性別發生更改。
基本上,我希望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,我們可以這樣取得進展。
盡管彼得給出的答案(上述)也是正確的,但我們也可以直接在ribs-ui.js庫文件中進行更改:
在tableview的initialize方法內(在文件ribone-ui.js中搜索tableview,找到其initialize函數)添加:
this.model.on("change", this.render, this);
你會沒事的。 (您可能希望在ribs-ui.js文件的list屬性的initialize方法內添加同一行,以獲取列表的響應視圖)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.