2

SO ですべての Backbone.js の回答を確認しましたが、問題を解決するものは見つかりませんでした。見逃した場合は、それを指摘してください。

BackBone.js 子ビューを取得して、親ビューがレンダリングする HTML に含まれる静的要素をレンダリングしようとしています。説明できる最も単純な例を作成しました。HTMLは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Child View Not Rendering</title>
</head>
<body>
  <div id="parent"></div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
  <script src="test.js"></script>
</body>
</html>

そして、ここにtest.jsJavascriptがあります：

(function () {
  var Child = Backbone.View.extend({
    el: '#child',
    render: function () {
      this.$el.html('World');
    }
  });
  var Parent = Backbone.View.extend({
    el: '#parent',
    initialize: function () {
      this.child = new Child();
    },
    render: function () {
      this.$el.html('Hello <span id="child"></span>!');
      this.child.render();
    }
  });
  var parent = new Parent();
  parent.render();
})();

これを実行すると、ブラウザでは"Hello !"なく表示されるだけです。"Hello World!"私は何を間違っていますか？前もって感謝します。

アップデート

私は自分の答えを見つけました（以下の「答え」を参照してください）が、私の解決策が最善のアプローチなのnew Child()かParent.initialize()、Child.$elそれともjQuery.live(). アイデア？

更新 #2

new Child()inの作成を残す別の回答を見つけましたParent.initialize() （以下の「回答」の更新を参照してください）。プロパティを割り当てるにはjQueryを使用する必要があり.$el、そこからプロパティを再割り当てし.elますChild.render()が、ハックのように感じます。もう一度聞きますが、もっと良い方法はありませんか?

更新 #3

.$elプロパティを割り当てるためのよりクリーンな方法を見つけることができました。.setElement(); 以下の私の回答で私のUPDATE＃2を参照してください。そして、まだより良い方法を探しています。

更新 #4

醜さをカプセル化する「親」クラスを作成する方法を見つけましたが、他のチェーンでは構成できません。以下の私の回答で私のUPDATE＃3.constructor()を参照してください。ビューを拡張するために最小限のコードしか必要としないmixin 戦略を見つけたいと思っています。それが、この質問を開いたままにしておくことです。素晴らしい答えを持っている人はいますか？前もって感謝します。

更新 #5

ここでUPDATE #4をスクラッチします。それは多くの問題を引き起こします。**したがって、誰かが問題を解決し、ミックスインに多くのコードを必要としない実行可能なミックスインとしてこれを作成できる場合は、選択した回答を喜んで提供します。前もって感謝します。

4

2 に答える 2