Просмотр исходного кода

Add _timing property to the input binding

shiny-input
Garrick Aden-Buie 6 лет назад
Родитель
Сommit
9568fdcd06
2 измененных файлов: 46 добавлений и 1 удалений
  1. +45
    -1
      inst/shiny-input-app/dev-shiny-input.Rmd
  2. +1
    -0
      inst/shiny-input-app/typing.js

+ 45
- 1
inst/shiny-input-app/dev-shiny-input.Rmd Просмотреть файл

1. Return the number of words the user has entered (`r github_sha_link("e3fa485bb60853e391302289213d3cd5f0846b3e")`) 1. Return the number of words the user has entered (`r github_sha_link("e3fa485bb60853e391302289213d3cd5f0846b3e")`)


1. Create variables for both number of characters and words and return both 1. Create variables for both number of characters and words and return both
in an object
in an object (`r github_sha_link("edfb9399eae5207cc4a3ef9b48e62c9c92230477")`)
### Tracking the timing

You can add your own properties and methods to the input binding.
As a convention,
the property or method names start with `_`.
Let's add a `_timing` property that with initialize with `null`.

```js
$.extend(typingSpeed, {
_timing: null,
// ...
}
```

Inside our input binding methods,
we can now access `this._timing`
to get the timing property for the input.
(And a new input binding is created for each input,
so if there are multiple typingSpeed inputs,
we'll automatically get the right `_timing` value.)

For methods called on objects,
`this` refers the the parent object.

Try the `repl_example("this-simple")` example to see how this works.

<details><summary>`repl_example("this-simple")`</summary>

```js
const person = {
name: "Christelle",
sayHello: function() {
console.log(`Hello, ${this.name}!`)
}
}

person.sayHello()

person.name = 'Mateo'
person.sayHello()
```

</details>

+ 1
- 0
inst/shiny-input-app/typing.js Просмотреть файл

const typingSpeed = new Shiny.InputBinding(); const typingSpeed = new Shiny.InputBinding();


$.extend(typingSpeed, { $.extend(typingSpeed, {
_timing: null,
find: function(scope) { find: function(scope) {
// Specify the selector that identifies your input. `scope` is a general // Specify the selector that identifies your input. `scope` is a general
// parent of your input elements. This function should return the nodes of // parent of your input elements. This function should return the nodes of

Загрузка…
Отмена
Сохранить