0

人々のグループの詳細を表示できるようにする小さなプログラムを作成しています。詳細を更新するオプションがあります。ただし、更新はビューによってレンダリングされていません。

ここに私の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();

テーブル内の 4 番目の名前のリアルタイム更新を見たいです。テキストボックス領域に変更を加えたときのサリー・フォックス。同様に、ラジオ ボタンを変更すると、Sally Fox のテーブルの性別が変わることを確認したいと思います。

基本的に、Backbone.TableView が Backbone.UI.RadioGroup や Backbone.UI.TextField などの他の Backbone.UI ウィジェットで行われた変更をリッスンするようにします。

4

2 に答える 2

1

あなたは正しい道を進んでいます。ビューにリスナーを追加して、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 を投稿してください。

于 2015-03-11T13:06:58.657 に答える
0

Peter の回答 (上記) も正しいですが、backbone-ui.js ライブラリ ファイルを直接変更することもできます。

tableview の初期化メソッド内 (ファイル backbone-ui.js で tableview を検索し、その初期化関数を見つけます) を追加します。

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

あなたは大丈夫です。(リストのレスポンシブ ビューを取得するには、backbone-ui.js ファイルの list プロパティの initialize メソッド内に同じ行を追加することをお勧めします)

于 2015-03-12T19:21:02.840 に答える