从 jquery 模板问题开始

发布于 2024-11-06 08:02:07 字数 1042 浏览 4 评论 0原文

我有：jquery1.6.min、jquery-tmpl.js（最新测试版）和knockout-1.2.0.js。我使用一个非常简单的例子，但我无法让 jquery 模板渲染，我不明白为什么，简单地说，我可以通过使用 firebug 扫描 dom 来查看 dom 中的元素 - 我有一些 tmp=annonymous(jquery,$item ) 出现，但数据未在 dom 内呈现。

模板：

<script id="bookTemplate" type="text/x-jquery-tmpl">
    <h2>${title}</h2>
    price: ${formatPrice(price)}
</script>

js代码：

<script type="text/javascript">
        $(document).ready(function() {
        // Create an array of books
        var books = [
            { title: "ASP.NET 4 Unleashed", price: 37.79 },
            { title: "ASP.NET MVC Unleashed", price: 44.99 },
            { title: "ASP.NET Kick Start", price: 4.00 },
            { title: "ASP.NET MVC Unleashed iPhone", price: 44.99}];

        function formatPrice(price) {
            return "$" + price.toFixed(2);
        }

        // Render the books using the template
        $('#bookTemplate').tmpl(books).appendTo('#bookContainer');
        });
    </script>

原文

I have: jquery1.6.min, jquery-tmpl.js (latest beta) and knockout-1.2.0.js. I am using a very simple example but I cannot get jquery templates to render, I cannot figure out why, simply put I can see the elements in the dom by scanning the dom using firebug - I have some tmp=annonymous(jquery,$item) appearing but the data does not render inside the dom.

template:

<script id="bookTemplate" type="text/x-jquery-tmpl">
    <h2>${title}</h2>
    price: ${formatPrice(price)}
</script>

jscode:

<script type="text/javascript">
        $(document).ready(function() {
        // Create an array of books
        var books = [
            { title: "ASP.NET 4 Unleashed", price: 37.79 },
            { title: "ASP.NET MVC Unleashed", price: 44.99 },
            { title: "ASP.NET Kick Start", price: 4.00 },
            { title: "ASP.NET MVC Unleashed iPhone", price: 44.99}];

        function formatPrice(price) {
            return "$" + price.toFixed(2);
        }

        // Render the books using the template
        $('#bookTemplate').tmpl(books).appendTo('#bookContainer');
        });
    </script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

歌枕肩 2024-11-13 08:02:07

window.formatPrice = function formatPrice(price) {
    return "$" + price.toFixed(2);
}

实时示例

您在模板中调用 formatPrice 但在闭包中定义函数。为了能够做到这一点，formatPrice 必须处于全局范围内。执行此操作的一个简单方法是将函数分配给 windiw.formatPrice

window.formatPrice = function formatPrice(price) {
    return "$" + price.toFixed(2);
}

Live Example

Your calling formatPrice in your template but defining the function in your closure. To be able to do this formatPrice has to be in global scope. An easy way to do this is to assign the function to windiw.formatPrice

回复收藏 0 原文

~没有更多了~