3

私は調べていて、たくさんの答えを見つけましたが、どれもうまくいかないようです。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
           Shopping Cart
        </title>
        <link rel="stylesheet" href="lib/style.css" type="text/css">
    </head>
    <body>
<script id="rtemp" type="text/x-underscore-template"">
            <span><%= title %></span>
    </script>
        <script src="lib/jquery.js" type="text/javascript"></script>
        <script src="lib/underscore.js" type="text/javascript"></script>
        <script src="lib/backbone.js" type="text/javascript"></script>
        <script src="lib/script.js" type="text/javascript"></script>
    </body>
    <script>
var Photo = Backbone.Model.extend({


    initialize: function(){
        console.log('this model has been initialized');

        this.bind("change:title", function(){
            var title = this.get("title");
            console.log("My title has been changed to.. " + title);
            var pv = new PhotoView();
            pv.render();
        });

    },

    setTitle: function(newTitle){
        this.set({ title: newTitle });
    },

    setLocation: function(newLoc)
    {
        this.set({location:newLoc});
    }
});

var PhotoView = Backbone.View.extend
({
    el: $('body'),

    render: function(event)
    {
        var name = myPhoto.get('title');
        console.info(name);
        var template = _.template($('#rtemp').html(), {title:name});
        console.info(this.model);
        $(this.el).html(template);
        return this;
    }

});



    </script>
</html>

初め;

メソッドの新しいインスタンスを作成する

 var newPhoto = new Photo();
 newPhoto.setTitle('Fishing');

これは正常に機能し、テンプレートを介して本文にロードされます。しかし、私がそれをもう一度やると、

newPhoto.setTitle('Sailing');

「null のメソッド 'replace' を呼び出せません」というエラーが表示されます。

行エラーはありませんが、

var template = _.template($('#rtemp').html(), {title:name});
4

1 に答える 1

24

ここでいくつか問題があります。

  1. テンプレート"のtype属性に double が含まれています。次のようにする必要があります。

    <script id="rtemp" type="text/x-underscore-template">

  2. あなたのビューは、あるべきときにrender参照しています:myPhotothis.model

    var name = this.model.get('title');

  3. そして、あなたの主な問題は、ビューが<body>as itsthis.elを使用し、テンプレートが内部にあること<body>です。

<body>ビューをレンダリングするときに、コンテンツを完全に置き換えます。

$(this.el).html(template);

したがって、最初のrender呼び出しの後、それ以上はありません#rtemp。次に、次のrender呼び出しで、これを試します。

var template = _.template($('#rtemp').html(), ...);

しかし、#rtempもうDOMにないので、すべてがバラバラになります。

テンプレートをすぐに取得する場合:

var PhotoView = Backbone.View.extend({
    el: $('body'),
    template: _.template($('#rtemp').html()),
    //...
});

そして、で使用this.template()しrenderます：

render: function(event) {
    //...
    var template = this.template({
        title: name
    });
    //...
}

あなたはより良い運を得るでしょう。もちろん、このアプローチを使用して、ドキュメント対応ハンドラー内でビューを定義する必要があります#rtemp。そうしないと、ビューを定義するときに使用できない場合があります。

デモ: http://jsfiddle.net/ambiguous/dwGsM/

とはいえ、アプリケーションの構造はかなり奇妙です。それ自体をリッスンするモデルがあり、何かが変更されたときにモデルがビューを作成してレンダリングします。それ自体をリッスンするモデル自体は問題ありませんが、通常、モデルをリッスンするビューがあり、モデルが変更されると、ビューはそれ自体 (またはビュー自体の一部) を再レンダリングします。

モデルは次のようになります。

var Photo = Backbone.Model.extend({
    setTitle: function(newTitle) {
        this.set({ title: newTitle });
    },
    setLocation: function(newLoc) {
        this.set({ location: newLoc });
    }
});

そして、次のようなあなたの見解：

var PhotoView = Backbone.View.extend({
    el: $('body'),
    template: _.template($('#rtemp').html()),
    initialize: function() {
        _.bindAll(this, 'render');
        this.model.on('change:title', this.render);
    },
    render: function(event) {
        this.$el.html(
            this.template(this.model.toJSON())
        );
        return this;
    }
});

_.bindAllinは、が正しく呼び出されるinitializeことを保証します。次に、イベントにバインドして、モデルの変更に応答できるようにします。ビューは何を気にかけているのかを知っているので、モデルの変更を処理する責任があります。では、通常、 を呼び出してテンプレートのデータを取得します。また、Backbone の新しいバージョンにはキャッシュされたバージョンのビューが含まれているため、もう自分で作業する必要はありません。this.renderthisinitializerendertoJSON$(this.el)this.$el$(this.el)

次に、次のようにクランクアップします。

var newPhoto = new Photo();
var viewPhoto = new PhotoView({ model: newPhoto });
newPhoto.setTitle('Fishing');
newPhoto.setTitle('Sailing');

modelビューの作成時にオプションを指定して、使用するモデルをビューに伝えます。

テンプレートを から移動することもでき<script>ます<body>。

新しく改善されたデモ: http://jsfiddle.net/ambiguous/Kytw7/

于 2012-06-12T18:50:50.370 に答える