使用 require js 进行淘汰 - 加载不正确

Question

大家好，我在同时使用 require js 和 knockout js 时遇到了一些困难。我正在尝试将 require js 实施到我正在进行的现有项目中。一切都很顺利，直到我击倒了路障。

我试图按照此处的淘汰赛页面上提供的示例进行操作： http://knockoutjs.com/documentation/amd-loading.html

当尝试 ko.applyBindings(new GDI_Application()); 时，它只是返回为未定义。我也设置了 https://github.com/rniemeyer/knockout-amd-helpers to load external templates. Followed another guide here http://www.newsuntold.dk/post/using-requirejs-and-knockout-amd-helpers-with-knockout 但仍然没有任何区别仍然得到 Uncaught TypeError: undefined is not a function

你们认为我缺少什么？

更新代码：我的 HTML 代码：

<script data-main="js/GDI_MAIN" src="js/require.js"></script>

这是我的 GDI_MAIN js 代码：

require.config({
    paths: {
        "jqueryUI": "../assets/jqueryUI/jquery-ui.min",
        "bootstrap": "bootstrap.min",
        "bootstrap_select": "../assets/silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.min",
        "jquery_timepicker": "jquery-ui-timepicker-addon",
        "jqueryui_timepicker_ext":  "jquery-ui-sliderAccess",
        "moment": "moment",
        "cookie": "js.cookie",
        "knockout-amd-helpers": "knockout-amd-helpers.min",
        "text": "text"
    },
        "shim": {
        bootstrap: {
            deps : [ 'jquery'],
            exports: 'Bootstrap'
        },
        bootstrap_select: {
            deps : [ 'jquery', 'bootstrap'],
            exports: 'Bootstrap_Select'
        },      
        jquery_timepicker: {
            deps : [ 'jquery'],
            exports: 'Jquery_Timepicker'
        },
        jqueryui_timepicker_ext: {
            deps : [ 'jquery'],
            exports: 'Jqueryui_Timepicker_Ext'
        }   
    }
});

require(["knockout", "GDI_Application", "GDI_Buttons", "GDI_common", "knockout-amd-helpers", "text", "moment"], function (ko, GDI_Application) {
ko.amdTemplateEngine.defaultPath = "../templates";
ko.applyBindings(new GDI_Application());
GDI_Application.fetchdata();


});

这是GDI_Application代码：

define(["knockout", "jquery", "jqueryUI", "bootstrap", "bootstrap_select","jquery_timepicker", "jqueryui_timepicker_ext", "moment"], function(ko, $) {
ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (typeof value === 'function') {
            $(element).on('hide.bs.modal', function() {
               value(false);
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
           $(element).modal("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}

incidentViewModel = function IncidentViewModel() {
    var self = this;
    self.showDialog = ko.observable(false);
    self.incidents = ko.observableArray();
    self.currentIncident = ko.observable();

    Incident.BASE_URL = '../../_vti_bin/listData.svc/GDI_DEV_Incidents';
    Incident.CREATE_HEADERS = {"accept": "application/json;odata=verbose"};
    Incident.UPDATE_HEADERS = {"accept": "application/json;odata=verbose","If-Match": "*"};

    self.fetchdata = function() {
    console.log("fetching - Attempting to execute code.");
    $.getJSON(Incident.BASE_URL+filterlist+orderlist,
        function(data) {        
            if (data.d.results) {       
                self.incidents(data.d.results.map(function(item) {
                return new Incident(item);
                }));
                $('#loading').hide("slow");
                $('#IncidentTable').show("slow");
                console.log("fetching data completed");
            }else {
                console.log("no results received from server");
                }
        });
    }

    self.saveorupdate = function() {
    console.log("save function executed");
        var id = this.ID,
            url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
            console.log(url);
        return $.ajax(url, {
            type: id ? "MERGE" : "POST",
            data: ko.toJSON({
                Description: this.Description,
                Incident: this.Incident
            }),
            processData: false,
            contentType: "application/json;odata=verbose",
            headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
            success: function (data) {
                        incidentViewModel.fetchdata();
                        console.log("Record was sucessfully saved.");

                        }   
        });
    }

    self.ShowSelectedIncident = function(data) {
        self.currentIncident(data);
        self.showDialog(true);
        console.log("The show selected incident has been ran.");    
    }   

    self.clearCurrentIncident = function() {
        self.showDialog(false);
        self.currentIncident(null);
    }

    self.AddNewIncident = function() {
        self.showDialog(true);
        self.currentIncident({ID:"",Description:"",Incident:""});
        console.log("AddNewIncident has been executed sucessfully.");
    }   
}

function Incident(data) {
    var self = this;
    self.ID = data.ID;
    self.Description = ko.observable(data.Description);
    self.Composante = ko.observable(data.Composante);
    self.Incident = ko.observable(data.Incident);
    self.ÉtatValue = ko.observable(data.ÉtatValue);
    self.PrioritéValue = ko.observable(data.PrioritéValue);
    self.Duré = ko.observable(data.Duré);
    self.Service = ko.observable(data.Service);
    self.Début_imputabilité = ko.observable(data.Début_imputabilité);
    self.Début_de_interruption = ko.observable(data.Début_de_interruption);
    self.Fin_de_interruption = ko.observable(data.Fin_de_interruption);
    self.Groupe_Support_Prime = ko.observable(data.Groupe_Support_Prime);
    self.ResponsableValue = ko.observable(data.ResponsableValue);
    self.Impact = ko.observable(data.Impact);
    self.Dépanage = ko.observable(data.Dépanage);
    self.Suivi = ko.observable(data.Suivi);
    self.Ressources = ko.observable(data.Ressources); 
}

return incidentViewModel;
});

Answer 1

我想不起来了：GDI_Application 目前 return 什么都没有。

看起来 IncidentViewModel 是您的应用程序 ViewModel，因此您需要 return 来自您的 GDI_Application 代码的 IncidentViewModel，以便 KO 可以应用绑定。

var incidentViewModel = function IncidentViewModel() {
   // your code here;
}

//later on
return incidentViewModel;

正如您指出的那样，对 GDI_Application.fetchdata() 的调用将不起作用。这一定是您使用完全不同的方法时的宿醉。

你可以

 var app = new GDI_Application();
 ko.applyBindings(app);
 app.fetchdata();

另外，我会考虑将 GDI_Application 重命名为 IncidentViewModel，因为它确实如此。

Answer 2

这不是我所知道的问题的直接答案，但我已经为 .NET 生态系统开发了一个模板，它使用组件架构将 RequireJS 与 KnockoutJS 结合在一起，并且还为类似 .NET MVC 的操作嵌入了 NancyFX和视图以及包括 Bootstrap 和 jQuery 支持。

您可以从我的 git 中心帐户下载它：

https://github.com/shawty/dotnetnotts15

它使用 Knockout 组件和自定义标签，允许模块化代码重用，即使它是为 NancyFX 连接的，它只是一个标准的 ASP.NET 网络应用程序，因此您可以很容易地删除 Nancy 并添加 ASP.NET MVC 回归，甚至使用您选择的任何后端。

使用 require js 进行淘汰 - 加载不正确

knockout with require js - Not loading correctly

javascript

jquery

knockout.js

knockout-amd-helpers