Jsrender 我第一次尝试使用JsViews时需要帮助
我阅读了John PAPA关于JsRender的文章，并使用它加载外部HTML文件的方式 为了初始化模板，现在我尝试在上面使用JsViews，但它没有按预期工作 我试图在UL中构建一个简单的菜单，并将我的模板绑定到一个对象数组。 此对象的一个属性是是否选择菜单，这将更改文本的样式 数据绑定和渲染是有效的，我添加了一个按钮来证明这一点，但使用“助手”则不行 我想在这里发布我的代码，这样我就可以得到一些关于如何开始使用JsViews的建议，并理解为什么没有调用我的helper函数Jsrender 我第一次尝试使用JsViews时需要帮助,jsrender,jsviews,Jsrender,Jsviews,我阅读了John PAPA关于JsRender的文章，并使用它加载外部HTML文件的方式 为了初始化模板，现在我尝试在上面使用JsViews，但它没有按预期工作 我试图在UL中构建一个简单的菜单，并将我的模板绑定到一个对象数组。 此对象的一个属性是是否选择菜单，这将更改文本的样式 数据绑定和渲染是有效的，我添加了一个按钮来证明这一点，但使用“助手”则不行 我想在这里发布我的代码，这样我就可以得到一些关于如何开始使用JsViews的建议，并理解为什么没有调用我的helper函数 Content o
Content of file: Default.htm
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.menu{ color: Blue; }
.hover{ color: Red; }
</style>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/js/jsrender.js" type="text/javascript"></script>
<script src="Scripts/js/jquery.observable.js" type="text/javascript"></script>
<script src="Scripts/js/jquery.views.js" type="text/javascript"></script>
<script src="Scripts/my/my.model.js" type="text/javascript"></script>
<script src="Scripts/my/my.template.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
my.template.loadMenuItemTemplate(onMenuItemAdded);
});
function onMenuItemAdded() {
$.link.menuItemTemplate
(
$("#lstMenu"),
my.model.menuItems
);
}
function Tests() {
my.model.menuItems.push(
{
id: 4,
label: "New",
selected: false
}
);
$.link.menuItemTemplate
(
$("#lstMenu"),
my.model.menuItems
);
}
</script>
</head>
<body>
<ul id="lstMenu" class="menu"></ul>
<button id="test" value="test" onclick="javascript:Tests();">Test !</button>
</body>
</html>
Content of file: _menuItem.tmpl.html
<li data-link="class{:~setClassName()}"><span>{{>label}}</span></li>
Content of file: my.model.js
var my = my || {}; //my namespace
my.model = (function () {
var _menuItems =
[
{
id: 1,
label: "Applications",
selected: false
},
{
id: 2,
label: "Contacts",
selected: true
},
{
id: 3,
label: "Environment",
selected: false
}
];
return {
menuItems: _menuItems
};
})();
Content of file: my.template.js
var my = my || {};
my.template = (function () {
var loadMenuItemTemplate = function (callback) {
if (!($.templates.menuItemTemplate)) {
var file = getTemplateFile("menuItem");
$.when($.get(file))
.done(function (tmplData) {
$.templates(
{
"menuItemTemplate": tmplData,
helpers: { setClassName: my.template.setClassName }
}
);
if (callback != null)
callback();
});
}
},
getTemplateFile = function (name) {
return "../templates/_" + name + ".tmpl.html";
},
setClassName = function () {
return (this.selected) ? "menu hover" : "menu";
};
return {
getTemplateFile: getTemplateFile,
setClassName: setClassName,
loadMenuItemTemplate: loadMenuItemTemplate
};
})();
文件内容：Default.htm
.菜单{颜色：蓝色；}
.hover{color:Red；}
$（文档）.ready（函数（）{
my.template.loadMenuItemTemplate（onMenuItemAdded）；
});
函数onMenuItemAdded（）{
$.link.menuitemplate
(
$（“#菜单”），
my.model.menuItems
);
}
功能测试（）{
my.model.menuItems.push(
{
id:4，
标签：“新”，
所选：false
}
);
$.link.menuitemplate
(
$（“#菜单”），
my.model.menuItems
);
}
测试！
文件内容：\ u menuItem.tmpl.html
{{{>label}
文件内容：my.model.js
var my=my |{}//我的命名空间
my.model=（函数（）{
变量菜单项=
[
{
id:1，
标签：“应用程序”，
所选：false
},
{
id:2，
标签：“联系人”，
所选：真
},
{
id:3，
标签：“环境”，
所选：false
}
];
返回{
菜单项：\ u菜单项
};
})();
文件内容：my.template.js
var my=my |{}；
my.template=（函数（）{
var loadMenuItemTemplate=函数（回调）{
如果（！（$.templates.menuitemplate））{
var file=getTemplateFile（“menuItem”）；
$.when（$.get（文件））
.完成（功能（tmplData）{
$。模板(
{
“menuItemTemplate”：tmplData，
帮助程序：{setClassName:my.template.setClassName}
}
);
if（回调！=null）
回调（）；
});
}
},
getTemplateFile=函数（名称）{
返回“./templates/“+name+”.tmpl.html”；
},
setClassName=函数（）{
返回（已选择）-“菜单悬停”：“菜单”；
};
返回{
getTemplateFile:getTemplateFile，
setClassName:setClassName，
loadMenuItemTemplate:loadMenuItemTemplate
};
})();
克劳德（Claude）正如他所说的那样，这是一大堆代码，而且有点脱离了回购的组织。我可以告诉您，我通常为jsViews实现助手函数的方式如下所示：
$.views.helpers({
onAfterChange: function (ev)
{
if (ev.type == "change")
{
ProcessUpdatedView(this);
}
},
Testing: function (fromResponseListFlyout, length, index)
{
return fromResponseListFlyout + length + index;
},
matchCurrentLanguage: function (languageID)
{
return languageID == PageSettings.activeSurveyLanguage.LanguageID ? true : false;
}
});
我很乐意为你解决这个问题，所以摆好小提琴，我们就可以解决了。：）愉快的编码。这是创建复制的大量代码。你能缩小范围并简化问题吗？如果问题仍然不起作用，请发布一个小的修改？您说您的助手函数没有被调用。试着创建一个小得多的样本来说明这个问题…谢谢你的回答。我又花了几个小时阅读教程和测试，现在效果很好。我可能会回来的时候，我会再次陷入困境虽然。。。再次感谢你。