Question

嗨大家好，我有点困难，用必要的js和淘汰js一起缠着我的脑袋。我试图在我现有的项目上实现require js。一切顺利，直到我用淘汰赛击中路障。

我试图按照淘汰页面上提供的示例： http://knockoutjs.com/documentation/amd-loading.html

尝试ko.applyBindings(new GDI_Application());时，它会以未定义的形式返回。我还设置了https://github.com/rniemeyer/knockout-amd-helpers来加载外部模板。在此处遵循了另一个指南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目前没有返回任何内容。

看起来IncidentViewModel是您的应用程序ViewModel，因此您需要从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结合在一起，并且还为它提供了NancyFX，用于.NET MVC，如操作和视图以及包括Bootstrap和jQuery支持。

您可以从我的git hub帐户下载：

https://github.com/shawty/dotnetnotts15

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

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

2 个答案: