使用require js進行剔除-無法正確加載

Question

大家好，我在使用require js和敲除js時遇到一些困難。 我正在嘗試將require js實施到我正在進行的現有項目中。 一切都進行得很好，直到我被淘汰賽打倒。

我正在嘗試遵循此處的剔除頁面上提供的示例： http : //knockoutjs.com/documentation/amd-loading.html

當嘗試ko.applyBindings(new GDI_Application()); 它只是返回未定義。 Ive還設置了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，甚至可以使用任何您選擇的后端。