如何使用 Backbone.js 在 HTML 页面中创建和显示外部模板

how to create and display external template in html page using Backbone.js?

本文关键字：创建 显示 外部 Backbone 何使用 js HTML      更新时间：2023-09-26

我对骨干网很陌生.js，我正在练习在我的"索引.html"页面中显示模板。我在"索引.html"中创建了一个模板，并在使用视图中显示它。它适用于单个 html 文件，即所有内容都保存在"index.html"中。但是现在我希望这些模板存储在其他文件中并显示在我的"索引.html"中。我试图找到一些解决方案，但一切都令人困惑。所以拜托，谁能告诉我我应该怎么做。

以下是我要显示的模板（当前在"索引.html"中）：

<script type="text/template" id="cloudtag_tempalte">
     <center>
        <ul class="cld" ">
            <li   >     <a  class="tag1" id="t1"  href="https://www.google.com" target="_blank"></a>  </li> 
            <li  >      <a  class="tag2" id="t2"  href="#">sachin </a>     </li>
            <li  >      <a class="tag3"  id="t3"  href="#">Ramesh </a>     </li>
            <li  >      <a  class="tag1"id="t33" href="#">Tendulkar</a></li>
            <li  >      <a  class="tag5"id="t34" href="#">Cricket</a></li>
            <li  >      <a  class="tag2"id="t35" href="#">Test</a></li>
        </ul><!--/cld-->
     </center>
</script>

下面是一个显示它的div（在同一个'index.html'中）：

 <div class="tags" id="myTags">  </div><!--/tags-->

以下是视图脚本（在同一文件"索引.html"中）：

<script type="text/javascript">
var cld_view=Backbone.View.extend({
        initialize: function(){
        },
        render: function(){
            // Compile the template using underscore
            var template = _.template( $("#cloudtag_tempalte").html(), {} );
            // Load the compiled HTML into the Backbone "el"
            this.$el.html( template );
        }
    });
    var cloudtag=new cld_view({el:$("#myTags")});
    cloudtag.render();
</script>

因此，请建议我进行更改以使此模板外部。感谢赞美. . .

最简单的方法是使用underscore.js，这是由 backbone .js 本身建议的。如果你想更进一步，那么你可以选择模板引擎，比如：

  1. 车把
  2. 木偶

等等。

我个人更喜欢下划线.js。一个例子如下：

使用下划线 ： 

   $.get('templates/your-template-file.html', function (data) {
        template = _.template(data, {
             data: data_you_want_to_pass_to_template
        });
        this.$el.html(template);  
    }, 'html');

至于将其扩展到您的代码： 

var cld_view=Backbone.View.extend({
    el:'template_div',
    initialize: function(){
    },
    render: function(){
        // Compile the external template file using underscore
        $.get(App.baseUrl + 'templates/your-template-file.html', function (data) {
            template = _.template(data, {  });
            this.$el.html(template);  
        }, 'html');
    }
});

App.baseUrl - 我设置为配置的项目根目录的完整路径。您可以重复使用或删除它。但只要确保，你指向确切的模板文件夹。

您需要指定el标记，否则您需要对要关注的div 进行硬编码以呈现模板。

干杯

我将编译的模板附加到对象本身。 您可以将额外的模板附加到主模板

<script type="text/javascript">
var cld_view=Backbone.View.extend({
        //compiled templates
        template : _.template($("#cloudtag_tempalte").html()),
        template2 : _.template($("#another_template").html()),
        initialize: function(){
        },
        render: function(){
            // Load the compiled HTML into the Backbone "el"
            this.$el.html( this.template);
            //add other templates to the main one.
            this.$el.find('someSelector').append(template2 );
        }
    });
    var cloudtag=new cld_view({el:$("#myTags")});
    cloudtag.render();
</script>

.最后，在努力使用 backbone.html 在我的"index"页面中创建和显示外部模板后，我找到了解决问题的方法.js。

为此，我使用了下划线js。以下是我成功运行应用程序所遵循的过程：

我按照本视频中提到的教程进行操作。

我创建了一个单独的模板文件，名为"CloudTagTemplate.html"，并将上述问题中提到的html代码粘贴到此文件中，并保存在"模板"文件夹中，稍后我将在其中存储其他模板：

我的云标签模板.html：

<center>
            <ul class="cld" ">
            <li   >     <a  class="tag1" id="t1"  href="https://www.google.com" target="_blank"></a>  </li> 
            <li  >      <a  class="tag2" id="t2"  href="#"></a>     </li>
            <li  >      <a class="tag3"  id="t3"  href="#"></a>     </li>
            <li  >      <a  class="tag2" id="t4"  href="#"></a>      </li>
            <li  >      <a  class="tag4" id="t5"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t6"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t7"  href="#"></a>      </li>
            <li  >      <a  class="tag5"id="t8"  href="#"></a>      </li>
            <li  >      <a  class="tag2"id="t9"  href="#"></a></li>
            <li  >      <a  class="tag1"id="t10" href="#"></a></li>
            <li  >      <a  class="tag3"id="t11" href="#"></a></li>
            <li  >      <a  class="tag4"id="t12" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t13" href="#"></a></li>
            <li  >      <a  class="tag5"id="t14" href="#"></a></li>
            <li  >      <a  class="tag1"id="t15" href="#"></a></li>
            <li  >      <a  class="tag2"id="t16" href="#"></a></li>
            <li  >      <a  class="tag1"id="t17" href="https://www.google.com"></a></li> 
            <li  >      <a  class="tag2" id="t18" href="#"></a></li>
            <li  >      <a  class="tag3"id="t19" href="#"></a></li>
            <li  >      <a  class="tag2"id="t20" href="#"></a></li>
            <li  >      <a  class="tag4"id="t21" href="#"></a></li>
            <li  >      <a  class="tag1"id="t22" href="#"></a></li>
            <li  >      <a  class="tag1"id="t23" href="#"></a></li>
            <li  >      <a  class="tag5"id="t24" href="#"></a></li>
            <li  >      <a  class="tag2"id="t25" href="#"></a></li>
            <li  >      <a  class="tag1"id="t26" href="#"></a></li>
            <li  >      <a  class="tag5"id="t27" href="#"></a></li>
            <li  >      <a  class="tag3"id="t28" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t29" href="#"></a></li>
            <li  >      <a  class="tag3"id="t30" href="#"></a></li>
            <li  >      <a  class="tag1"id="t31" href="#"></a></li>
            <li  >      <a  class="tag4"id="t32" href="#"></a></li>
            <li  >      <a  class="tag1"id="t33" href="#"></a></li>
            <li  >      <a  class="tag5"id="t34" href="#"></a></li>
            <li  >      <a  class="tag2"id="t35" href="#"></a></li>
            </ul><!--/cld-->
     </center>

然后我在视图文件夹中创建了一个 CloudTagView.js：

我的云标签视图.js：

 var cld_view=Backbone.View.extend({
       el:'#myTags',
       initialize: function(){
       },
       render: function(){
            var that=this;
            $.get( '/multipage/Backbone/Templates/CloudTagTemplate.html', function (data) {
                template = _.template(data, {  });
                that.$el.html(template);  
            }, 'html');
        }
    });
    var cloudtag=new cld_view();
    cloudtag.render();

请注意——

 var that=this;

放在那里很重要，因为我们正在定义匿名函数 $.get（）

最后，我将"索引.html中的所有必需文件链接为：

<script src="Backbone/Views/CloudTagView.js"></script>
<script src="Backbone/Views/LoginModalView.js"></script>

最后它如我所愿地工作得很好。感谢@Roy·

相关文章：