使用require-js敲除-未正确加载

knockout with require js - Not loading correctly

本文关键字:加载 require-js 敲除 使用      更新时间:2023-09-26

大家好,我在使用require-js和knock-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但仍然没有任何区别仍然得到CCD_ 2

你们觉得我少了什么?

更新的代码:我的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_应用程序代码:

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;
});

我突然想到: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,因为这就是它的真实情况。

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

你可以从我的github账户下载,网址:

https://github.com/shawty/dotnetnotts15

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