1

そこで、RequireJs、Mustache、Backbone.js を使ってテスト アプリを作成しています。Mustache テンプレートを使用して、モデルのコレクションをレンダリングすることに成功しました。しかし、私の Mustache テンプレートにはボタンがあり、ビュー内のボタンにクリック イベントをバインドしようとすると、ボタン クリックはコールバック関数を呼び出しません。私は本当に立ち往生しています、誰かが私が正しくやっていないところを教えてもらえますか?

これが私のコードです：

ItemView.js:

define(['jquery', 'backbone', 'underscore', 'mustache', '../../atm/model/item'], function ($, Backbone, _, Mustache, Item) {

var ItemView = Backbone.View.extend({        
    initialize: function() {
    },

    tagName: 'li',

    events: {
        'click .button': 'showPriceChange'
    },

    render: function() {
        var template = $('#template-atm').html();
        var itemObj = this.model.toJSON();
        itemObj['cid'] = this.model.cid;

        var rendering = Mustache.to_html(template, itemObj);
        this.el = rendering;

        return this;
    },

    showPriceChange: function(event) {
        alert('Changing...');
        $('#' + elemId).empty();
        $('#' + elemId).append(document.createTextNode('Changed'));
    },       
});

return ItemView;
});

atm.html:

<!DOCTYPE html>
<html>
<head>
    <title>Elevator</title>
    <script data-main="scripts/main" src="scripts/require-jquery.js"></script>
    <style type="text/css">

    </style>
</head>

<body>
    <h1>Vending Machine</h1>
    <div id="atm-items">
    </div>

    <script id="template-atm" type="html/template">
        <li>
            <p>Item: {{name}}</p>
            <label for="price-{{cid}}">Price:</label>
            <input id="price-{{cid}}" type="text" value="{{price}}"/>
            <button class="button">Change</button>
            <p id="status-{{name}}-{{cid}}">- -</p>
        </li>
    </script>
</body>
</html>
4

1 に答える 1

4

elビューの内部を置き換えていますrender：

render: function() {
    //...
    this.el = rendering;
    //...
}

delegateこれを行うと、に接続されている jQuery が失われthis.el、そのdelegateハンドラー (バックボーンが追加する) がイベント ルーティングを担当します。

通常、 を置き換えるのではなく、 に追加します。テンプレートが次のようになっている場合:this.el this.el

<script id="template-atm" type="html/template">
     <p>Item: {{name}}</p>
     <label for="price-{{cid}}">Price:</label>
     <input id="price-{{cid}}" type="text" value="{{price}}"/>
     <button class="button">Change</button>
     <p id="status-{{name}}-{{cid}}">- -</p>
 </script>

次にthis.$el.append(rendering)、ビューのrender; ビューを に設定したので、これは<li>インを提供します。this.eltagNameli

または、本当に をテンプレートに保持する必要がある場合は、 、を置き換えて、イベントの委譲を処理する<li>ことができます。setElementthis.elthis.$el

this.setElement(rendering);

おそらく、これらすべて<li>を<ul>、<ol>、または<menu>他の場所でラップしています。そうでない場合は、無効な HTML を生成しており、ブラウザーがそれを修正しようとする可能性があります。HTML 構造がセレクターの想定と異なる可能性があるため、修正によって別の場所で問題が発生する可能性があります。

于 2012-06-19T19:39:48.350 に答える