6

我对编程很陌生，尤其是对车把。我在我的 html 文件中加载了一个 div，其中包含 jquery 和车把的组合。我在它上面有标签。单击选项卡时，我想将所有内容重新加载到新内容。内容相似（结构相同），但标签、图像等必须更改。我尝试在handlebars.js 中使用部分。这是一个示例代码。

<script type="text/x-handlebars-template" id="all-handlebar">
    {{#each tabs}}
        <div id=tab{{@index}}>{{this.text}}</div>
    {{/each}}
    <div id="tab-content">{{> tabContentPartial}}
</script>
<script type="text/x-handlebars-template" id="tab-content-partial"> 
    <div id="mycontent">
        <div id="text">{{mycontent.text}}</div>
        <div id="text">{{mycontent.image}}</div>
    </div>      
</script>
<script type="text/javascript">
    source=$("#all-handlebar").html();
    var template = Handlebars.compile(source);
    Handlebars.registerPartial("tabContentPartial", $("#tab-content-partial").html())
    var context = {
        mycontent : {
            text="something that has to change everytime I click on a different tab",
            image="idem"
    };
    var html = template(context);
    $("body").html(html);
</script>

它第一次加载良好，但是当我单击选项卡时，我要求他重新注册选项卡内容部分脚本并且它不再存在，因为它已在我的代码中更改为 HTML 块。如何使用新内容重用和重新加载我的部分脚本？

非常感谢 ！

4

1 回答 1

6

您的代码的选项卡切换部分以及您如何检索数据都丢失了，所以我只能告诉您在您收听选项卡切换的地方需要做什么。

为了实现这一点，你只需要为此编译你#tab-content-partial的，你不需要做太多的改变：

var source=$("#all-handlebar").html();
var contentSrc=$("#tab-content-partial").html();
var template = Handlebars.compile(source);
var contentTemplate = Handlebars.compile(contentSrc);

//because you already have a compiled version of your content template now you can pass this as partial
Handlebars.registerPartial("tabContentPartial", contentTemplate);
var context = {
    mycontent : {
        text : "something that has to change everytime I click on a different tab",
        image : "idem"
    }
 };

var html = template(context);
$("body").html(html);

然后在您需要更改内容时，您只需将内容的数据传递给内容模板，然后用#tab-content新结果替换内容。这样您还可以创建不同的内容模板。

//replace the content with the result of the template
$("#tab-content").html( contentTemplate(newContent) );

我希望这就是你在寻找的东西，如果不是随意问。

于 2013-07-02T15:23:42.693 回答