带有 CoffeeScript、继承、对象实例化的 Knockout.js答案

【问题标题】：Knockout.js with CoffeeScript, Inheritance, Object Instantiation带有 CoffeeScript、继承、对象实例化的 Knockout.js
【发布时间】：2014-08-02 07:03:07
【问题描述】：

我无法调用Test 方法。我希望能够调用孩子Test 方法。我不确定我的继承是否正确。

作品

<a href="javascript:void(0);" data-bind="click: Save">Save</a>

不工作

<a href="javascript:void(0);" data-bind="click: Test">Test</a>

也..不工作

<a href="javascript:void(0);" 
   data-bind="click: ContributionMappings().DebitAccount().Test">Test</a>

代码：

class DebitAccount
    constructor: () ->
        @SortOrder = ko.observable()
        @Entity = ko.observable()
        @Field = ko.observable()
        @FieldValue = ko.observable()
        @Constant = ko.observable()
        @Default = ko.observable()
        @Entity2 = ko.observable()
        @Field2 = ko.observable()

    Test: () =>
        alert 'test'

class ContributionMappings
    constructor: () ->
        @DebitAccount = ko.observable()

class Mapping
    constructor: () ->
        @ContributionMappings = ko.observable()

    Save: () =>
        alert 'save'

$ () =>
    @viewModel = new Mapping    

    # connect items with observableArrays
    ko.applyBindings(viewModel)

jsbin demo

【问题讨论】：

抱歉，缩进已关闭 b/c 我必须在 4 个空格中标记所有内容，使其看起来像 WYSIWIG 中的代码。使用上面的 jsbin 链接。这是一个工作示例。是的，它们是方法。
** 缩进与问题无关。使用 JSBin 链接 **
jsbin.com/setiboka/1/edit

标签： javascript inheritance knockout.js coffeescript

【解决方案1】：

查看 CoffeeScript 页面的Classes, Inheritance, and Super 部分，了解如何实现类原型继承的详细信息。简而言之，您的代码应该类似于：

class DebitAccount
    constructor: () ->
        @SortOrder = ko.observable()
        # etc.

    Test: () =>
        alert 'test'

class ContributionMappings extends DebitAccount
    constructor: () ->
        super

class Mapping extends ContributionMappings
    constructor: () ->
        super

    Save: () =>
        alert 'save'

但是，我不确定您要实现的确切目标 - 您的类名并不暗示我与继承关系。如果您尝试组合类而不是扩展它们，那么您的代码看起来与您所拥有的非常相似：

class DebitAccount
    constructor: () ->
        @SortOrder = ko.observable()
        #etc.

    Test: () =>
        alert 'test'

class ContributionMappings
    constructor: () ->
        @DebitAccount = ko.observable(new DebitAccount())

class Mapping
    constructor: () ->
        @ContributionMappings = ko.observable(new ContributionMappings())

    Save: () =>
        alert 'save'

但是，当您使用 Knockout 绑定引用内部属性时，您需要遍历中间对象：

<a href="javascript:void(0);" data-bind="click: ContributionMappings.DebitAccount.Test">Test</a>

【讨论】：