2

jQueryMobile と Backbone.js
を使用して、Phonegap プロジェクトの基本アーキテクチャをセットアップしようとしています。複数のプラットフォームを対象としており、将来的に拡張する予定です。
プラットフォーム全体でビューがどのように見えるか分からないため、ビューに関連付けられた HTML 要素のタイプをバックボーン コードで完全に認識しないようにしたいと考えています。
簡単な例として、あるプラットフォームではアイテムのリストがULandLI要素から作成されているかもしれませんが、別のプラットフォームでは何らかの理由でそれをDIVandP要素に切り替えたい場合があります。

現時点では、tagName を指定しない場合、デフォルトでDIV.
このようなテンプレートを 1 つのページで提供できるようにしたいと考えています。 

<script id="attachmentTemplate" type="text/template">
     <li><a href="#"><%= title %></a></li>
</script>

そして別の提供： 

<script id="attachmentTemplate" type="text/template">
    <p><a href="#"><%= title %></a></p>
</script>

tagName を指定せずにそれを行うことはできません (前述のとおり、デフォルトはDIVです)。

これを行うためのアドバイスや方法はありますか？重要なのは、Javascript に HTML 要素の型を認識させたくないということです。HTML にそれを定義させたいのです。

4

3 に答える 3

13

関数を使用してビューで tagName プロパティを指定できるため、動的になります。

...

tagName: function(){
    return this.model.get('tagName');
},

...

このフィドルをチェックアウトhttp://jsfiddle.net/b7mR6/

于 2013-09-06T15:06:22.060 に答える
4

このアーキテクチャはお勧めしませんが、render メソッドをオーバーライドできます。

render: function() 
{
    // unbind all handlers since delegateEvents was called in the constructor
    this.undelegateEvents();
    // set this.el to the domElement from the templates
    this.el = this.template(this.model.toJSON()); // or however you get to your template
    // create the shorthand dom reference that setElement() creates
    this.$el = $(this.el);
    // re-delegate the events
    this.delegateEvents();
}

つまり、テンプレートで定義した tagName について心配する必要はありません。

編集：バックボーンコードを調べると、これがまさにsetElementそうであるため、理論的には試すことができます

render: function() 
{
    var tpl = this.template(this.model.toJSON());
    this.setElement(tpl, true);
    return this;
}
于 2012-05-16T12:58:34.467 に答える
1

いつものように、検索しても検索しても答えが見つからない場合は、質問をして自分で解決します。

テンプレートを次のように作成すると、次のことがわかりました。 

<script id="attachmentTemplate" tagname="li" type="text/template">
    <a href="#"><%= title %></a>
</script>

次に、私のjsコードで、ビューをインスタンス化するときにこれを行うことができます:
var attachmentView = new AttachmentListItemView({ tagName: $('#attachmentTemplate').attr('tagname'), model: item });

そして、それは完璧に機能します。
それが有効な HTML になるのか、それとも将来的に問題が発生するのかはわかりません。

于 2012-05-16T12:55:48.523 に答える