Django、淘汰赛和requirejs_Django_Knockout.js_Requirejs

Django、淘汰赛和requirejs

django knockout.js requirejs

Django、淘汰赛和requirejs,django,knockout.js,requirejs,Django,Knockout.js,Requirejs,不知道Django、knockout和requirejs是如何相互影响的。我尝试的每件事都会得到“ReferenceError:ko未定义”或类似的消息。我当前的代码如下所示： base.html: <script src="{{ STATIC_URL }}js/require.js"></script> <script type="text/javascript"> var SiteConfig = { baseStaticUrl: "{{ STAT

不知道Django、knockout和requirejs是如何相互影响的。我尝试的每件事都会得到“ReferenceError:ko未定义”或类似的消息。我当前的代码如下所示：

base.html:

<script src="{{ STATIC_URL }}js/require.js"></script>
<script type="text/javascript">
    var SiteConfig = { baseStaticUrl: "{{ STATIC_URL }}" };
    require(['{{ STATIC_URL }}js/require_config.js'], function (require_config) {
        {% block require_javascript %}
        {% endblock require_javascript %}
    });
</script>

require.config({
    "baseUrl": SiteConfig.baseStaticUrl,
    "paths": {
        'jquery': SiteConfig.baseStaticUrl + 'js/jquery-1.11.0.min',
        'knockout': SiteConfig.baseStaticUrl + 'js/knockout-3.3.0',
        'bootstrap': SiteConfig.baseStaticUrl + 'bootstrap/js/bootstrap.min',
        'underscore': SiteConfig.baseStaticUrl + 'js/underscore-1.8.3.min'
    },
    "shim": {
        'jquery': {
            'exports': '$'
        },
        'knockout': {
            'exports': 'ko'
        },
        'bootstrap': {
            'deps': ['jquery']
        },
        'underscore': {
            'deps': ['jquery'],
            'exports': '_'
        }
    }
});

require(
    ['jquery', 'knockout', 'bootstrap', 'underscore']
);

{% block require_javascript %}

    require.config({
        "paths": {
            'flot': '{{STATIC_URL}}flot/jquery.flot.min',
            'multiselect': '{{STATIC_URL}}js/bootstrap-multiselect'
            'mything': '{{STATIC_URL}}mything/js/api',
            'page': '{{STATIC_URL}}patientplans/js/page'
        },
        "shim": {
            'page': {
                'deps': ['flot', 'multiselect', 'mything']
            }
        }
    });

    require(['flot', 'multiselect', 'mything', 'page']);

{% endblock require_javascript %}

// Some knockout stuff here

...

$(document).ready(function(){

    require(['knockout', 'jquery', 'js/MyViewModel'], function(ko, $, MyViewModel) {
        ko.applyBindings(new MyViewModel());
    });
});

define(['knockout', 'jquery'], function(ko, $) {
    return function MyViewModel(){
        var self = this;

        ...

    }
});

page.html:

<script src="{{ STATIC_URL }}js/require.js"></script>
<script type="text/javascript">
    var SiteConfig = { baseStaticUrl: "{{ STATIC_URL }}" };
    require(['{{ STATIC_URL }}js/require_config.js'], function (require_config) {
        {% block require_javascript %}
        {% endblock require_javascript %}
    });
</script>

require.config({
    "baseUrl": SiteConfig.baseStaticUrl,
    "paths": {
        'jquery': SiteConfig.baseStaticUrl + 'js/jquery-1.11.0.min',
        'knockout': SiteConfig.baseStaticUrl + 'js/knockout-3.3.0',
        'bootstrap': SiteConfig.baseStaticUrl + 'bootstrap/js/bootstrap.min',
        'underscore': SiteConfig.baseStaticUrl + 'js/underscore-1.8.3.min'
    },
    "shim": {
        'jquery': {
            'exports': '$'
        },
        'knockout': {
            'exports': 'ko'
        },
        'bootstrap': {
            'deps': ['jquery']
        },
        'underscore': {
            'deps': ['jquery'],
            'exports': '_'
        }
    }
});

require(
    ['jquery', 'knockout', 'bootstrap', 'underscore']
);

{% block require_javascript %}

    require.config({
        "paths": {
            'flot': '{{STATIC_URL}}flot/jquery.flot.min',
            'multiselect': '{{STATIC_URL}}js/bootstrap-multiselect'
            'mything': '{{STATIC_URL}}mything/js/api',
            'page': '{{STATIC_URL}}patientplans/js/page'
        },
        "shim": {
            'page': {
                'deps': ['flot', 'multiselect', 'mything']
            }
        }
    });

    require(['flot', 'multiselect', 'mything', 'page']);

{% endblock require_javascript %}

// Some knockout stuff here

...

$(document).ready(function(){

    require(['knockout', 'jquery', 'js/MyViewModel'], function(ko, $, MyViewModel) {
        ko.applyBindings(new MyViewModel());
    });
});

define(['knockout', 'jquery'], function(ko, $) {
    return function MyViewModel(){
        var self = this;

        ...

    }
});

page.js:

<script src="{{ STATIC_URL }}js/require.js"></script>
<script type="text/javascript">
    var SiteConfig = { baseStaticUrl: "{{ STATIC_URL }}" };
    require(['{{ STATIC_URL }}js/require_config.js'], function (require_config) {
        {% block require_javascript %}
        {% endblock require_javascript %}
    });
</script>

require.config({
    "baseUrl": SiteConfig.baseStaticUrl,
    "paths": {
        'jquery': SiteConfig.baseStaticUrl + 'js/jquery-1.11.0.min',
        'knockout': SiteConfig.baseStaticUrl + 'js/knockout-3.3.0',
        'bootstrap': SiteConfig.baseStaticUrl + 'bootstrap/js/bootstrap.min',
        'underscore': SiteConfig.baseStaticUrl + 'js/underscore-1.8.3.min'
    },
    "shim": {
        'jquery': {
            'exports': '$'
        },
        'knockout': {
            'exports': 'ko'
        },
        'bootstrap': {
            'deps': ['jquery']
        },
        'underscore': {
            'deps': ['jquery'],
            'exports': '_'
        }
    }
});

require(
    ['jquery', 'knockout', 'bootstrap', 'underscore']
);

{% block require_javascript %}

    require.config({
        "paths": {
            'flot': '{{STATIC_URL}}flot/jquery.flot.min',
            'multiselect': '{{STATIC_URL}}js/bootstrap-multiselect'
            'mything': '{{STATIC_URL}}mything/js/api',
            'page': '{{STATIC_URL}}patientplans/js/page'
        },
        "shim": {
            'page': {
                'deps': ['flot', 'multiselect', 'mything']
            }
        }
    });

    require(['flot', 'multiselect', 'mything', 'page']);

{% endblock require_javascript %}

// Some knockout stuff here

...

$(document).ready(function(){

    require(['knockout', 'jquery', 'js/MyViewModel'], function(ko, $, MyViewModel) {
        ko.applyBindings(new MyViewModel());
    });
});

define(['knockout', 'jquery'], function(ko, $) {
    return function MyViewModel(){
        var self = this;

        ...

    }
});

MyViewModel.js:

<script src="{{ STATIC_URL }}js/require.js"></script>
<script type="text/javascript">
    var SiteConfig = { baseStaticUrl: "{{ STATIC_URL }}" };
    require(['{{ STATIC_URL }}js/require_config.js'], function (require_config) {
        {% block require_javascript %}
        {% endblock require_javascript %}
    });
</script>

require.config({
    "baseUrl": SiteConfig.baseStaticUrl,
    "paths": {
        'jquery': SiteConfig.baseStaticUrl + 'js/jquery-1.11.0.min',
        'knockout': SiteConfig.baseStaticUrl + 'js/knockout-3.3.0',
        'bootstrap': SiteConfig.baseStaticUrl + 'bootstrap/js/bootstrap.min',
        'underscore': SiteConfig.baseStaticUrl + 'js/underscore-1.8.3.min'
    },
    "shim": {
        'jquery': {
            'exports': '$'
        },
        'knockout': {
            'exports': 'ko'
        },
        'bootstrap': {
            'deps': ['jquery']
        },
        'underscore': {
            'deps': ['jquery'],
            'exports': '_'
        }
    }
});

require(
    ['jquery', 'knockout', 'bootstrap', 'underscore']
);

{% block require_javascript %}

    require.config({
        "paths": {
            'flot': '{{STATIC_URL}}flot/jquery.flot.min',
            'multiselect': '{{STATIC_URL}}js/bootstrap-multiselect'
            'mything': '{{STATIC_URL}}mything/js/api',
            'page': '{{STATIC_URL}}patientplans/js/page'
        },
        "shim": {
            'page': {
                'deps': ['flot', 'multiselect', 'mything']
            }
        }
    });

    require(['flot', 'multiselect', 'mything', 'page']);

{% endblock require_javascript %}

// Some knockout stuff here

...

$(document).ready(function(){

    require(['knockout', 'jquery', 'js/MyViewModel'], function(ko, $, MyViewModel) {
        ko.applyBindings(new MyViewModel());
    });
});

define(['knockout', 'jquery'], function(ko, $) {
    return function MyViewModel(){
        var self = this;

        ...

    }
});

现在，我的想法是通过一个全局变量

ko

可以访问knockout，但无论我怎么做，它都不会出现在

窗口中
朝着正确的方向努力会很好。
ko
不会是一个全局函数，它会作为一个参数传递给代码所在的匿名函数。别指望它归window
@Roy J-Hmm所有，这很奇怪。我正在尝试将requirejs添加到使用knockout的现有项目中。如果我用基本的
标记加载所有内容，我会在窗口中得到一个ko
对象。这就是项目的淘汰功能目前的工作方式。我是否错过了requirejs的工作原理？是的，这正是你所错过的。requirejs的一个主要好处是分离全局空间。查看viewmodel代码的语法。请参见ko如何作为函数的参数？那是你的ko。