asp.net-mvc-4 - Uncaught TypeError: Cannot call method 'fineUploader' of undefined

Question

What am I am doing wrong here? I am using ASP.NET MVC4 with Knockout.js & Require.js.

Here is all the javascript files:

app.contracts.js

requirejs.config({
    "baseUrl": "../../Scripts/app/administrator",
    "paths": {
        "app.contracts": "app.contracts",
        "ko": "../../lib/knockout-2.2.1",        
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
        "toastr": "../../lib/toastr",
        "moment": "../../lib/moment",
        "fineuploader": "../../lib/jquery.fineuploader-3.8.0",
        "model.contract": "../models/model.contract",
        "model.paymentterm": "../models/model.paymentterm",
        'knockout.bindings': "../../lib/knockout.bindings",
    }
});

// Load the main app module to start the app
require(["main.contracts"], function (bs) { bs.run(); });

knockout.bindings.js

define('knockout.bindings', ['ko', 'moment', 'fineuploader'], function (ko, moment, fineuploader) {
    ko.utils.contains = function (string, startsWith) {
        string = string || "";
        if (startsWith.length > string.length) return false;

        return string.toLowerCase().indexOf(startsWith.toLowerCase()) >= 0;
    };

    ko.bindingHandlers.date = {
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            var date = moment(value());
            var strDate = date.format('LL');
            $(element).text(strDate);
        }
    };

    ko.bindingHandlers.contractuploader = {
        console.log(fineuploader); // this is undefined
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            $(element).fineUploader({
                request: { endpoint: '/api/file', params: valueAccessor() },
                deleteFile: { enabled: true, endpoint: '/api/file' }
            })
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // This will be called once when the binding is first applied to an element,
            // and again whenever the associated observable changes value.
            // Update the DOM element based on the supplied values here.
        }
    };

});

main.contracts.js

define(['ko', 'contractsViewModel', 'model.contract', 'model.paymentterm', 'fineuploader'], function (ko, contractsViewModel, Contract, PaymentTerm, fineuploader) {
    var
        run = function () {

            var vm = new contractsViewModel();

            var array = [];

            var parts = document.location.href.split("/");
            var id = parts[parts.length - 1];

            vm.clientId(id);

            var ptArray = [];

            $.getJSON("/api/Clients/GetByClientId/" + vm.clientId(), function (data) {
                vm.clientName(data.Name);
                var newItem = {};
                newItem.Text = data.BusinessName;
                newItem.Value = true;
                vm.ownerTypes.push(newItem);
            });

            $.getJSON("/api/Companies/GetMyCompany", function (data) {
                var newItem = {};
                newItem.Text = data.Name;
                newItem.Value = false;
                vm.ownerTypes.push(newItem);
            });

            $.getJSON("/api/paymentterms/", function (data) {
                $.each(data, function (key, val) {
                    var c = new PaymentTerm();
                    c.PaymentTermId(val.PaymentTermId);
                    c.Name(val.Name);
                    c.IsActive(val.IsActive);
                    ptArray.push(c);
                });
            }).then(function () {
                vm.paymentTerms(ptArray);

                var contractArray = [];
                $.getJSON("/api/Contracts/getbyclientId/" + vm.clientId(), function (data) {
                    $.each(data, function (key, val) {
                        var c = new Contract();
                        c.ContractId(val.ContractId);
                        c.IsActive(val.IsActive);                            
                        contractArray.push(c);
                    });

                }).done(function () {
                    vm.contracts(contractArray);
                });
            });

            ko.applyBindings(vm, document.getElementById('#administrator-contracts-view'));
        };
    return {
        run: run
    };
});

Here is the HTML:

 @{
    ViewBag.Title = "Contracts";
}

@section scripts{

    <script data-main="../../Scripts/app/administrator/app.contracts" src="../../Scripts/lib/require.js"></script>
    @Scripts.Render("~/bundles/knockoutjs")
}

<div id="administrator-contracts-view">
    <div class="contentList fullWidth">
        <ul data-bind="foreach: filteredContracts">
        <li data-bind="css: { 'edit': IsEditMode() }">
            <div class="floatL docs">
                <h3>Documents:</h3>
                <div class="docDisplay">
                    <a title="Add documents" id="docAddHref" data-bind="contractuploader: { fileSystemId: 1 }" href="#" class="docAdd"></a>
                    <a href="#" class="docIcon pdf">Doc Name</a>
                    <a href="" class="docIcon docx">Doc Name</a>
                    <a href="" class="docIcon xls">Doc Name</a>
                </div>
                <!-- /.docDisplay -->
            </div>
           </li>
         </ul>
    </div>
    <!-- /.contentList -->
</div>
<!-- /#administrator-contracts-view -->

Answer 1

我需要在 html 文件中包含 jquery.fineuploader，如下所示：

@section scripts{

    <script data-main="../../Scripts/app/administrator/app.contracts" src="../../Scripts/lib/require.js"></script>
    @Scripts.Render("~/bundles/knockoutjs")
    @Scripts.Render("~/bundles/fineuploader")
}

这解决了错误。