Question

我在使用flot grap和knockout js时遇到了问题

Flot Graph在淘汰赛绑定div外侧工作 如果它位于淘汰赛绑定div之外，那么图形的（div占位符）就可以很好地绘制。 以下是jsfiddle - http://jsfiddle.net/keyur12/g9aLe/

在knocout绑定div内部时，Flot Graph无法正常工作 只要我们在knockout绑定div中添加div占位符，那么flot grap的画布就不起作用了。 以下是jsfiddle - http://jsfiddle.net/keyur12/fGBBR/

<div style="float:left">
    Test 1
<h2>People</h2>
<ul data-bind="foreach: people">
    <!-- flot grap div inside knoutout binding -->
    <div id="placeholder" style="width:400px;height:300px;float:right"></div>

    <li> hi1 </li>
</ul>
<div>

感谢任何帮助。

Answer 1

对于数组中的每个元素，foreach块中的所有标记都是重复的。因此，在上面的标记中，您将有一个

<div id="placeholder" style="width:400px;height:300px;float:right"></div>

for people数组中的每个人员。这将导致重复的“占位符”元素。

此外，您正尝试使用

在文档就绪功能中绘制图形

 $.plot($("#placeholder"), data, options);

哪个不起作用，因为该元素甚至还不存在。你能解释一下你想做什么吗？你想为每个人画一张图吗？如果是这样，您应该创建自定义绑定（请参阅：custom binding doc

Answer 2

经过一番努力和重新思考后，终于找到了自己的解决方案。

基本上要使flot图在knockout绑定中工作，必须确定如何为可观察值分配值。

如果使用getJSON调用 如果observables是getJSON调用中的assgined值，那么$.plot($("#placeholder0"), data, options);应该在getJSON调用内部，并且具有占位符的唯一索引。不在$(document).ready(function(){}); 示例：

$的getJSON（＆＃34; someURL＆＃34;，功能（数据）{ self.someObservableArray（data.someArrayObjects）; $ .plot（$（＆＃34;＃placeholder0＆＃34;），data，options）; }）;

如果未使用getJSON调用，则应调用$.plot($("#placeholder0"), data1, options);

（文档）$。就绪（函数（）{}）;在ko.applybindings（）;

之后
示例：

$(document).ready(function(){ ko.applybindings(new appModel()); $.plot($("#placeholder0"), data, options); });

以下是工作示例的更新小提琴 - http://jsfiddle.net/keyur12/fGBBR/3/

使用knockoutjs时，Flot画布不会在UI中呈现

2 个答案: