如何使用样式数据绑定?

2024-03-24

我在 KnockoutJS 中使用样式绑定时遇到困难。

<script id="avatarTemplate" type="text/x-jquery-tmpl">
  <div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x + 'px'), top: 
    (y + 'px') }">${s}, ${x}, ${y}</div> 
</script> 

<div data-bind="template: { name: 'avatarTemplate', foreach: avatars }"></div> 

渲染该模板的结果是:

<div id="avatar_1" class="avatar" style="width: 50px; height: 85px;">avatar.png, 0, 0</div> 

谁能帮我弄清楚为什么所有依赖于视图模型的样式都不显示?


If x and y是可观察的,那么你需要这样指定它:

<div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x() + 'px'), top: 
    (y() + 'px') }">${s}, ${x}, ${y}</div> 

如果在表达式中使用可观察量,则需要用 () 指定它,因为它不会自动解包。

http://jsfiddle.net/rniemeyer/6GtV3/ http://jsfiddle.net/rniemeyer/6GtV3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用样式数据绑定? 的相关文章

  • 淘汰赛js的无容器声明在热毛巾SPA中​​不起作用?

    我试图使用无容器语句 例如热毛巾模板中的淘汰赛 js 但它不起作用 相反 如果我使用与某些元素 如 div 的可见绑定 那么它工作得很好 div div 谁能告诉我 knockoutjs 的无容器语句在热毛巾模板中是否不起作用 在默认热毛巾
  • MVC4 部分视图中的淘汰赛绑定

    简而言之 我相信我所追求的是一种在 MVC4 部分视图中为剔除绑定 javascript 对象提供范围 上下文的方法 这样我就可以重用相同的部分而不会让它们互相干扰 但仍然能够在客户端引用父子视图模型 作为一个出色的菜鸟 更广泛地说 是真正
  • 正确处理浏览器资源

    我有一个网络应用程序 可以在很长一段时间内动态加载数据 数据内有图像的链接 然后在浏览器中呈现这些图像 e g var object Name ko observable Foo Ref ko observable Bar ImageUrl
  • KnockoutJS:向映射生成的 ObservableArray 中的对象添加 Observable 属性和函数

    我是新来的淘汰赛 http knockoutjs com 并且我一直试图向生成的对象添加其他属性和方法ko observableArray 由创建mapping plugin 这就是我要做的 我有一个 JSON 数组Users 我已经创建了
  • ko.mapping 创建函数,扩展对象

    是否可以在映射过程中修改对象的模式 由于缺乏更好的术语 我想是的 我似乎无法让它发挥作用 我正在尝试这样的事情 var data itemOne someData itemTwo moreData var mapping newItem c
  • 何时使用 ko.utils.unwrapObservable?

    我使用 KnockoutJS 编写了一些自定义绑定 我仍然不确定何时使用ko utils unwrapObservable item 查看代码 该调用基本上检查是否item是一个可观察的 如果是 则返回value 如果不是 则返回value
  • 条件验证不适用于匿名淘汰赛验证规则

    我的视图模型中有以下属性 它们使用淘汰验证 其中之一是自定义验证来检查密码匹配 model Password ko observable extend required message Password is required params
  • 未捕获的语法错误:实时但不在本地服务器上出现意外的令牌 B

    所以我正在制作一些ajax帖子 它似乎在本地主机上工作正常 但是当我将其发布到亚马逊上的ec2服务器时 我得到 Uncaught SyntaxError Unexpected token B 这似乎表明 JSON 解析失败 完全相同的数据库
  • Knockoutjs 自定义绑定在项目完全渲染之前执行

    我正在尝试对项目列表执行回调以使用数据表 http datatables net 现在我想在渲染所有项目之后执行回调 而不是在渲染每个项目之后执行回调 跟随那个所以问题 https stackoverflow com questions 1
  • ko.utils.arrayFirst 在不处理非空字符串的 else 块时始终返回 null

    这可以正确工作 self getById function id return ko utils arrayFirst self PostArray function item if item postId id return item e
  • jquery .html() 追加后绑定不起作用

    我有这个简单的 div div div 它是空的 现在我正在尝试附加这个HTML到上面的div div div
  • knockout.js 将表单加载到 viewModel 中

    我目前正在成功使用 knockout js 来处理应用程序中的所有数据绑定 但是 在每个页面加载时 在我的 document ready 中 我正在执行初始异步数据加载 如下所示 document ready getData 但是 是否可以
  • KnockoutJS - 打印迭代索引作为输入名称

    我正在尝试结合 Spring MVC 创建我的第一个 KnockoutJS 表单视图 ModelAttribute捆绑 数据通过 Ajax 加载并使用 KnockoutJS 填充 通过 KnockoutJS 添加数据 通过 Ajax 和 K
  • KnockoutJS:在 Select 中的每个选项上调用单击事件

    我希望每当用户单击 SELECT 元素中的选项时 Knockout 都会调用一个事件 这是我的 JavaScript function ReservationsViewModel this availableMeals mealName S
  • Knockout 中的 TextBox 数据绑定问题(提供小提琴)关键问题之一

    Step 1 在我的页面加载时 我使用自定义绑定在文本框中显示日期 Step 2 问题在于 当我尝试发布文本框中的内容时 我在控制器上得到的最小日期是错误的 即 01 01 0001 00 00 00 我的cshtml
  • 使用knockout js实现html5拖放照片,durandal 2.0

    我在淘汰赛 js 视图模型中有一个照片列表 我希望能够在它们之间交换 实际上更正确的术语是将一张复制到另一张上面 这是我的简化视图模型 define durandal app knockout jquery function app ko
  • 使用Knockout将不同模型绑定到页面上的不同部分

    我在我的 asp net 应用程序中使用淘汰赛 javascript 库 对于淘汰赛我使用ko对象和应用绑定 方法来绑定它 现在我想将两个淘汰对象绑定到两个不同的用户界面部分 我如何使用第二个淘汰对象或第二个数据源 以便我可以在第二部分中使
  • Knockout:避免绑定中的循环更新

    我有一个与接口交互的自定义 绑定Scribe https github com guardian scribe 一个内容可编辑的所见即所得编辑器 当编辑器内容发生变化时 它会更新关联的可观察量 并在关联的可观察量发生变化时更新编辑器 ko
  • 淘汰赛“闪烁”问题

    我正在使用 KO 构建 SPA 单页应用程序 该应用程序看起来像一本书 用户可以翻页 问题是 每次加载页面时 都会有一小段时间页面 闪烁 用户会看到页面的无样式版本 我猜这是因为很多样式都依赖于 ko 绑定 所以在 ko 完成它 神奇 之前
  • 对模板之一的 observableArray 进行排序

    我有以下视图模型 function instance id FirstName extend this id ko observable id FirstName ko observable FirstName 我在 observableA

随机推荐