小编sha*_*wty的帖子

如何使用 typescript 扩展第三方 Javascript 对象

中午之后的大部分时间我一直在试图弄清楚如何做到这一点,但我要么没有得到什么,要么我处理问题的方法是错误的。

我目前正在开发一个项目,我需要覆盖现有的 Javascript 对象,我已经拥有了 JS 文件。

第三方库有一个形状基类,它是一个作为自执行函数创建的 JS 类。

在库中,有许多从此类派生的形状,它们在幕后看起来像是使用典型的调用/应用路由来扩展形状基类。

在我的代码中,我必须这样做来扩展其中一个形状(我们将其称为 simpleshape),以便实现我自己的自定义形状及其绘制代码。

function MyCustomShape() {
  simpleShape.call(this);
};

shapeUtils.extend(MyCustomShape, simpleShape);

MyCustomShape.prototype.redraw = function (param1, param2) {
  // my custom implementation here
};
Run Code Online (Sandbox Code Playgroud)

“shapeUtils.extend”是形状库中的一个函数,它扩展了该类,我不知道它到底做了什么,而且它被严重混淆了。然而,我最终得到的是一个“MyCustomShape”类,它实现了 simpleShape 类及其属性等,正如您所看到的,我只需重写重绘函数,图形库也会在需要时调用它。

这一切在普通的旧 JavaScript 中都可以正常工作,但是我正在使用 TypeScript,目前为了使其工作,我已将其内联到要使用它的 TS 类内的嵌入式 JS 函数中。

就像是:

class myTsClass {

  // constructor

  // private properties, functions etc
  
  private pointerToMyCustomShape: Function;

  private createMyCustomShape(){

    this.pointerToMyCustomShape = function MyCustomShape() {
      simpleShape.call(this);
    };

    shapeUtils.extend(MyCustomShape, simpleShape);

    MyCustomShape.prototype.redraw = function (param1, param2) {
      // my custom implementation here
    };

  } …
Run Code Online (Sandbox Code Playgroud)

javascript oop class extending-classes

5
推荐指数
1
解决办法
1669
查看次数

在flexbox项目中获得100%高度div

我正在尝试使用flexbox生成以下布局.

在此输入图像描述

顶部黑条,中间部分和底部黑条都是弹性项目,它们是正文标签内部的包装div的子项,如下所示.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href="~/Styles/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Styles/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Styles/ppt_site.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper">

        <div id="topRow">
        </div>

        <div id="centralRow">

            <div id="sidebarColumn">
            </div>

            <div id="contentColumn">
            </div>

        </div>

        <div id="bottomRow">
        </div>

    </div>

    @Section['customScripts']
    <script src="~/Scripts/siteGlobals.js"></script>

    <script src="~/requireconfig"></script>
    <script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"></script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

控制所有这些的样式表如下

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column; …
Run Code Online (Sandbox Code Playgroud)

css layout html5 css3 flexbox

5
推荐指数
1
解决办法
2016
查看次数

打开文件缩进意外

我是使用python开发的新手,我进行了很好的搜索,以查看是否可以在发布此内容之前回答我的问题,但是我的搜索空白。

我正在打开一个带有随机缩进的文件,我想搜索该文件以找到特定的行,然后将其写入另一个文件中。为此,我正在使用:

with open("test.txt", "r+") as in_file:
buf = in_file.read().strip()
in_file.close()
out_file = open("output.txt", "w+")
for line in buf:
    if line.startswith("specific-line"):
        newline == line + "-found!"
        out_file.append(newline)
    out_file.close()
Run Code Online (Sandbox Code Playgroud)

当我的代码加载并读取文件时没有任何问题时,我正在努力解决的问题是如何忽略“ test.txt”文件中的缩进。

例如:

我可能有。

ignore this line
ignore this line
specific-line one
specific-line two
ignore this line
    specific-line three
specific-line four
        specific-line five
ignore this line
ignore this line
Run Code Online (Sandbox Code Playgroud)

在我的档案中。

就目前而言,我的代码只会找到以“ specific-line ” 开头并在其中包含“ 1 ”,“ 2 ”和“ 4 ”的行。

我需要对我的代码做些什么来更改它,以便我也获得带有“ 特定行 ”加上“ ”和“ ”的行,但是忽略其他任何行(标记为-' 忽略此行)我不想的')行 …

python file indentation

1
推荐指数
1
解决办法
482
查看次数

是否有可能将Aurelia组件的价值反馈给父母

我正在使用Aurelia创建一个应用程序,在该应用程序的一部分中,我有一个列出用户的网格,特别是用户活动状态.

为了允许编辑活动状态,我创建了一个滑动按钮控件(类似于在iOS中看到的那样),其中向左滑动为真,右侧为false.

我想要做的是在我的用户网格中使用此控件,以便使用它的人只需单击自定义幻灯片按钮即可启用/禁用用户,但我需要该控件以在其更改时提供其值放到它的行.

像这样的东西:

想象一下,我的桌子看起来像这样

<table>
  <thead> 
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Is Active?</th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="user of userList">
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.email}</td>
      <td><slidebutton active="${user.active}"></slidebutton></td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

这非常有效,以至于幻灯片按钮根据用户的活动状态按预期设置为默认值.

但是当更改滑动按钮时,我希望以某种方式通知行,以便我可以告诉它更新后端并更改状态.

我并不反对将用户ID传递给自定义组件EG:

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td>
Run Code Online (Sandbox Code Playgroud)

但我宁愿没有控制权来打电话,也不做任何阻止我在其他地方使用它的东西,比如可能有不同切换信息项的其他网格.

我曾经想过基于事件的方式,然后我看了一个用户表,看到有可能有一个超过500行的表,跟踪/管理来自500个幻灯片按钮的500个事件没有看起来真像我特别想做的事情.

如果有一种方法可以将值反映回属性,那么我认为这将是一个很好的开始,但是如果可能的话,我真正喜欢的是自定义控件直接更改行上的基础视图模型如果可能的话.

custom-controls typescript aurelia aurelia-binding

1
推荐指数
1
解决办法
178
查看次数