我正在尝试将此组件jchartfx与Durandel集成。 我有一个独立的原型,没有使用Durandel进行剔除,并且效果很好,因此我确信问题与Durandel有关。

这是我的视图模型代码:

define(function (require) {
    var http = require('durandal/http');
    var serverUrl = '/api/burndown';
    var chart1;

    function burnDownModel() {
        var self = this;
        self.initilize = true;
        self.displayName = 'Burndown Chart';
        self.description = 'Burndown Chart';
        self.chartData = ko.observableArray([]);
        self.viewAttached = function() {

        };

        // testing with fake data
        self.activate = function () {
            return http.get(serverUrl).then(function (response) {

                for (var i = 0; i < 10; i++) {
                    var data = {
                        "Date": '2013-02-18T00:00:00',
                        "DevCurrentEstimates": 6.5,
                        "TestCurrentEstimates": 7.5,
                        "DevOriginalEstimates": 8.5,
                        "TestOriginalEstimates": 9.5
                    };


                    self.chartData.push(data);
                }

                ko.bindingHandlers.jchartFx = {
                    init: function (element, valueAccessor) {
                        chart1 = new cfx.Chart();
                        chart1.getData().setSeries(4);
                        chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
                        chart1.getAxisX().getLabelsFormat().setCustomFormat("MMM-dd");
                        debugger;

                        var value = ko.utils.unwrapObservable(valueAccessor());
                        chart1.setDataSource(value);
                        chart1.create(element);
                    }
                };
            });
        };
    };

    return burnDownModel;
});

和我的HTML绑定

<div id="ChartDiv1" class="chartdiv"  data-bind="jchartFx:chartData"style="width:550px;height:400px;display:inline-block"></div>

正如我所说的,我没有杜兰德尔就可以进行这项工作。

这是该解决方案的脚本:

<script type="text/javascript">

    $(function () {
        var viewModel = {
            chartDatas: ko.observableArray([])
        };
        LoadChartData();

        function LoadChartData() {
            for (var i = 0; i < 10; i++) {
                var chartData = {
                    "Date": '2013-02-18T00:00:00',
                    "DevCurrentEstimates": 6.5,
                    "TestCurrentEstimates": 7.5,
                    "DevOriginalEstimates": 8.5,
                    "TestOriginalEstimates": 9.5
                };
                viewModel.chartDatas.push(chartData);
            }
        }

        ko.applyBindings(viewModel);
    });

</script>

我可以看到的唯一区别是该脚本在页面加载时运行,并且我也必须手动应用ko绑定,而不是Durandel替我这样做。 我没有任何错误,只是没有显示图表数据。

===============>>#1 票数:1 已采纳

在代码上的第一件事,将chartData更改为Observable。 使用jchartfx,它期望的是单个对象数组(json),而不是对象数组。 我将单个数组传递给chartData可观察。

向您的Knockout bindingHandler添加一个“更新”,并在那里执行图表创建方法。 当您从viewModel中的viewAttached方法或afterBind获取数据时,将触发此事件。 由于viewAttached是在Durandal绑定到DOM之后的,因此您的图表将按预期显示。

viewModel文件

define(function (require) {

    var system = require('durandal/system');
    var http = require('durandal/http');

    // KO observables & bindings
    var errorMessage = "";
    var pageTitle = "jChartFX Demo";
    var chartData = ko.observable();

    function LoadServerData() {

        // Your server request can go here;
        var items = [{
            "Date": '2013-02-18T00:00:00',
            "DevCurrentEstimates": 6.5,
            "TestCurrentEstimates": 7.5,
            "DevOriginalEstimates": 8.5,
            "TestOriginalEstimates": 9.5
        },{
            "Date": '2013-02-18T00:00:00',
            "DevCurrentEstimates": 6.5,
            "TestCurrentEstimates": 7.5,
            "DevOriginalEstimates": 8.5,
            "TestOriginalEstimates": 9.5
        },{
            "Date": '2013-02-18T00:00:00',
            "DevCurrentEstimates": 6.5,
            "TestCurrentEstimates": 7.5,
            "DevOriginalEstimates": 8.5,
            "TestOriginalEstimates": 9.5
        }]
       chartData(items);
    }

    var activate = function(view) {
        system.log("view activated");
        return;
    }

    var viewAttached = function (view) {
        LoadServerData();
        system.log("viewAttached loaded");
        return;
    }

    return {
        pageTitle: pageTitle,
        chartData: chartData,
        activate: activate,
        viewAttached: viewAttached
    }
});

ko.bindingHandlers.jchartFx = {
    init: function (element, valueAccessor) {
        chart1 = new cfx.Chart();
        chart1.getData().setSeries(4);
        chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
        chart1.getAxisX().getLabelsFormat().setCustomFormat("MMM-dd");
        debugger;
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        chart1.setDataSource(value);
        chart1.create(element);
    }
};

和视图文件

<div>
    <h2 data-bind="text: pageTitle"></h2>
    <div id="ChartDiv1" class="chartdiv" data-bind="jchartFx: chartData" style="width:550px;height:400px;display:inline-block"></div>
</div>

===============>>#2 票数:0

问题似乎与视图尚未附加到DOM有关。

一种可能的解决方案是在viewModel中创建一个属性,该属性指示视图是否已附加,并修改绑定,以便在附加视图之前不创建图表。

//in view model
isViewAttached = ko.observable(false);
self.viewAttached = function () {
    self.isViewAttached(true);
};


//in binding
ko.bindingHandlers.jchartFx = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        ...
        viewModel.isViewAttached.subscribe(function () {
            $(element).chart();
        });
        ...

但是,这可能不是最好的主意,因为它依赖于视图模型中的“魔术”属性。

更好的方法可能是创建一个辅助绑定,您可以将其直接绑定到isViewAttached属性,然后通过allBindingsAccessor参数从jchartFx绑定中访问它。 这样,所有视图模型属性的依赖关系就可以公开获得,并且更容易知道发生了什么。

无论如何,我强烈建议将绑定移出Activate函数-理想情况下移至首次加载应用程序时执行的全局脚本。 您确实只想设置一次ko.bindingHandlers.jchartFx另外,您可能想在其他视图模型中使用它。

  ask by user2286314 translate from so

未解决问题?本站智能推荐:

1回复

杜兰达淘汰赛未定义

我有一个问题,从淘汰赛数组中删除对象。 我怎么了 它说:TypeError:that.active_periods是未定义的。 那么,那是怎么回事:that.active_periods.removeAll(freeDay); period.js period.html
1回复

与杜兰达尔的淘汰赛绑定

我正在使用durandal创建一个Web应用程序。 我正在使用淘汰赛将值绑定到服务器上的页面。 我在将淘汰赛observableArray绑定到页面时遇到问题,它是一个有点复杂的数组。 我的observableArray看起来像 看来, 没有错误,无法正常工作。
2回复

杜兰达淘汰赛点击事件

我需要你的帮助。 我已经尝试过,但是找不到解决方案。 当我按下图标时,clickevent并未启动,以删除其中的免费Days。 其他clickevent有效。 这是我的代码: period.js period.html 我怎么了
1回复

杜兰达小工具:淘汰赛“ “异常

我遇到了一些奇怪的事情。 (至少对我来说)并且不确定在这种情况下纠正这个问题的最佳途径是如何使用小部件,并且在没有数据的情况下不会实际渲染我的标记 图A 在这种情况下,我的菜单项计数为0.但是包含代码部分的if语句仍然呈现。 EG标题和ul (图A) 如果我通过chro
1回复

杜兰达/淘汰赛-全球可观察

语境 在我的shell.html中,我在标题部分放入了语言选择。 看起来像这样: 我的shell.js: 当我加载其他视图时,它始终保留在标题中,并且不会更改。 任务 每当用户更改语言时,我希望能够在任何子页面上进行注册/通知,然后做出相应的反应-就像以另一种
2回复

杜兰达淘汰赛不起作用

我有个问题。 我将durandal模板与kickout.js一起使用。 当我尝试将数据从我的视图模型传递到视图时,什么也没发生。 我看到永久加载。 那是我的视图模型: 和我的看法: 怎么了?
1回复

杜兰达(Duranda)取代了淘汰赛模板吗?

在约翰·帕帕(John Papa)开设的第一门“代码露营”课程中,使用了诸如{control}.tmpl.html格式的剔除模板。 但是在下一门课程“ Code Camper快速入门”中,到处都在使用Durandal compose方法。 compose方法是创建User Control
1回复

热毛巾水疗中心杜兰达尔淘汰赛和Dynatree

我正在尝试基于此提琴( http://jsfiddle.net/EZgNs)使dynatree控件在Hottowel视图模型中工作 无法理解如何编辑vm以合并dynatree ko。
1回复

单个页面应用程序中的多个区域/部分。 杜兰达和淘汰赛方法

我将一个单页面应用程序放在一起,其中页面上有多个部分/区域(例如,一列是左侧三分之一的宽度,一列是右侧相似的宽度),在这里我可以交换使用关联的视图模型输入和输出不同的视图。 例如,在加载页面时,我正在显示产品列表。 然后,用户可以单击产品,详细信息显示在屏幕中间,最右边的部分是有关成本和
2回复

淘汰赛扩展问题-更好的解决方案?

我是淘汰赛的新手,仍然在学习如何最好地使用它。 我在应用程序中有一些输入字段,这些字段与一堆实时更新的计算相关。 各个领域的工作很棒,一切都很好... 除了,我需要在用户输入时格式化输入,仅用于显示(原始数据必须保留用于计算,但3应该显示为3%或在另一个字段中3000000应该显示为3